useChart

Charts are plain SVG themed by IndokuUI, with no extra dependency. Install @indoku/ui and import what you need.

useChart shares colors, number formatting and legend highlighting between charts and your own markup.

Import

tsx

import { useChart, ChartLegend, sortChartData, chartTokens } from "@indoku/ui"

Examples

Legend highlighting

Hover a legend item to dim the other series.

tsx

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]function UseChartLegend() {  const chart = useChart({ series })  return (    <Box maxW="2xl">      <LineChart series={series} categories={months} highlight={chart.active} />      <ChartLegend chart={chart} items={series.map((s, i) => ({ name: s.name, color: chart.colors[i] }))} />    </Box>  )}

Formatting

Pass format to change how numbers print.

$1234k and $87k

tsx

function UseChartFormat() {  const chart = useChart({ format: (v) => `$${v.toFixed(0)}k` })  return <Text>{chart.format(1234)} and {chart.format(87)}</Text>}

Sorting

sortChartData sorts without mutating.

tsx

const sales = [  { name: "Tea", value: 340 },  { name: "Coffee", value: 910 },  { name: "Juice", value: 220 },  { name: "Soda", value: 580 },]function UseChartSorting() {  const sorted = sortChartData(sales, (d) => d.value, "desc")  return <Box maxW="2xl"><BarChart series={[{ name: "Sales", values: sorted.map((d) => d.value) }]} categories={sorted.map((d) => d.name)} /></Box>}

Size and spacing tokens

sizes {"sm":160,"md":220,"lg":300} spacing {"sm":4,"md":8,"lg":16}

tsx

function UseChartTokens() {  return <Text fontSize="sm" fontFamily="mono">sizes {JSON.stringify(chartTokens.size)} spacing {JSON.stringify(chartTokens.spacing)}</Text>}

Props

useChart(options)

Prop	Type	Default	Description
`series`	`{ name?; color? }[]`	–	Used to resolve colors.
`format`	`(v: number) => string`	–	Number formatter. Default: compact.
`highlight`	`number \| null`	–	Force the highlighted series.

Returned object

Prop	Type	Default	Description
`colors`	`string[]`	–	Resolved series colors.
`active / setActive`	`number \| null`	–	Highlighted series.
`opacity(i)`	`number`	–	1, or 0.2 when dimmed.
`legendProps(i)`	`object`	–	Spread on your own legend item.
`format(v)`	`string`	–	Formatter.
`tokens`	`object`	–	chartTokens: size, spacing, padding.

* required. Style props and HTML attributes are accepted as well.

← Overview Line Chart →

Created by @indokudev