> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/2.builder/2.backoffice/9.chart/1.counter.md).

# Counter

Widget chart berjenis counter dapat menyajikan informasi numerik secara langsung (counter) bersamaan dengan visualisasi grafik.

Untuk menggunakan chart counter pilih dan klik tambah widget, kemudian klik tab-menu chart dan pilih counter

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-958fa12df3e54006b8d6c98983c9c868a47415d7%2Fimage%20(48)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Klik/pilih icon gear untuk melakukan konfigurasi pada counter

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-17240f6c4895e80c2c9edd397dd0441f783eeff6%2Fimage%20(49)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Berikut adalah tampilan bidang konfigurasi pada widget counter

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-98219217c12987b43f89796e671866d2925e34c2%2Fimage%20(50)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Sesuaikan isian bidang konfigurasi dengan data yang akan ditampilakan

Berikut adalah tampilan dashboard backend yang menggunakan widget chart berjenis counter ![](https://github.com/QTN-DEV/quantumbyte-doc/blob/main/img/v1/backoffice/doc51.png)