Komponen / Grafik & jadwal
ColumnChart
Grafik kolom vertikal tanpa pustaka: kolom tunggal dengan garis target, bertumpuk (komposisi per kategori), histogram (band berurutan), dan divergen (masuk ke atas, keluar ke bawah garis nol).
Import
tsx
import { ColumnChart, Card, formatNumber, formatShare } from '@divistant/circca-react';Props
Grafiknya aria-hidden; angka lengkap dibawa tabel tersembunyi (ChartDataTable). Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| categories | ReactNode[] | — | Label sumbu x: kategori, periode, atau band ("1–3 tahun", "Sep · berjalan"). |
| series | { key: string; label: ReactNode; tone?: ChartTone; values: number[] }[] | — | Seri data; `values` sejajar dengan `categories`. Divergen: seri 1 ke atas, seri 2 ke bawah (nilai positif). |
| mode | 'grouped' | 'stacked' | 'histogram' | 'diverging' | 'grouped' | Bentuk grafik. Mode selain divergen menganggap nilai negatif sebagai 0. |
| target | number | { value: number; label?: ReactNode } | — | Garis target (Chart/TargetLine). Label bawaan "Target <nilai>". Tidak berlaku di divergen. |
| max | number | — | Batas atas skala. Bawaan nilai/total/target terbesar — kolom tertinggi mengisi area (tanpa sumbu y, ikut Figma). |
| height | number | 120 (divergen 110) | Tinggi area batang dalam px, tanpa label nilai & kategori. |
| barWidth | number | 'fill' | 64 · divergen 36 · histogram 'fill' | Lebar kolom; menyusut mengikuti slot bila wadah sempit. `fill` mengisi slot dengan celah 4. |
| valueFormat | (value: number) => string | — | Format label nilai, tooltip, dan tabel. Bawaan angka id-ID maks. 1 desimal dengan minus "−". |
| showValues | boolean | true | Label nilai di atas (divergen: juga di bawah) kolom. |
| highlightIndex | number | — | Kategori yang labelnya ditebalkan (Footnote/Medium fg/default), mis. periode berjalan. |
| tooltip | boolean | false | Chart/Tooltip saat hover/fokus; kolom dijelajah dengan roving tabindex (panah, Home/End). |
| legend | boolean | seri > 1 | Legenda seri (ChartLegend) di bawah grafik. |
| legendValue | (series, index) => ReactNode | — | Teks di kanan label legenda: "· 4 (80%)". |
| caption | ReactNode | 'Data grafik kolom' | Judul tabel data untuk pembaca layar — samakan dengan judul kartu. |
| categoryHeader | ReactNode | 'Kategori' | Kepala kolom kategori di tabel pembaca layar ("Periode", "Skema"). |
| emptyState | ReactNode | — | Pengganti bila semua nilai 0. Bawaan teks "Belum ada data untuk periode ini." |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/column-chart. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.