Charts

Thin composable wrappers around recharts: ChartContainer provides the responsive canvas and theme colors; ChartLine / ChartBar / ChartArea wrap the chart roots and rotate the --chart-1..6 series palette; grid, axes, tooltip and legend come pre-styled with semantic tokens. TreeMap shares the same palette.

Line chart

Series colors rotate through --chart-1..6 automatically; pass stroke to override.

<ChartContainer>
  <ChartLine data={data}>
    <ChartGrid />
    <ChartXAxis dataKey="month" />
    <ChartYAxis />
    <ChartTooltip />
    <ChartLegend />
    <Line type="monotone" dataKey="scans" name="Scans" dot={false} strokeWidth={2} />
    <Line type="monotone" dataKey="findings" name="Findings" dot={false} strokeWidth={2} />
  </ChartLine>
</ChartContainer>

Bar chart

Same composition with ChartBar; the tooltip cursor band follows the hover token.

<ChartContainer>
  <ChartBar data={data}>
    <ChartGrid />
    <ChartXAxis dataKey="severity" />
    <ChartYAxis />
    <ChartTooltip />
    <ChartLegend />
    <Bar dataKey="open" name="Open" radius={[4, 4, 0, 0]} />
    <Bar dataKey="resolved" name="Resolved" radius={[4, 4, 0, 0]} />
  </ChartBar>
</ChartContainer>

Area chart

Area fills default to a 10% tint of the series color.

<ChartContainer>
  <ChartArea data={data}>
    <ChartGrid />
    <ChartXAxis dataKey="month" />
    <ChartYAxis />
    <ChartTooltip />
    <Area type="monotone" dataKey="scans" name="Scans" strokeWidth={2} />
  </ChartArea>
</ChartContainer>

Tree map

Proportional rectangles with the shared series palette; aria-label is required.

<TreeMap
  data={[
    { name: 'Lending', value: 4200 },
    { name: 'DEX', value: 3100 },
    // …
  ]}
  aria-label="Total value locked by protocol category"
/>

Chart API

Thin composable wrappers around recharts 3.x. ChartContainer provides the responsive canvas and theme colors via context; the root wrappers rotate the --chart-1..6 palette onto their Line/Bar/Area children (re-exported from recharts so you need no direct recharts dependency). Each wrapper forwards its props to the underlying recharts component.

Prop / method	Type	Default	Description
ChartContainer	React.ComponentProps<'div'>	h-64 w-full	Sizes the chart (height via className) and mounts the recharts ResponsiveContainer once computed theme colors are available. Takes a single chart-root child.
ChartLine	React.ComponentProps<typeof LineChart>	—	Line-chart root. Pass data plus chrome/series children; series colors resolve via useChartColors. Wraps recharts LineChart.
ChartBar	React.ComponentProps<typeof BarChart>	—	Bar-chart root. Same composition as ChartLine. Wraps recharts BarChart.
ChartArea	React.ComponentProps<typeof AreaChart>	—	Area-chart root. Area fills default to a 10% tint of the series color. Wraps recharts AreaChart.
Line / Bar / Area	recharts series elements	—	recharts series primitives re-exported here. Place them inside the matching root; stroke/fill colors are assigned automatically (explicit stroke/fill wins).
ChartGrid	React.ComponentProps<typeof CartesianGrid>	—	CartesianGrid pre-styled with border-secondary lines; horizontal-only (vertical={false}) by default.
ChartXAxis	React.ComponentProps<typeof XAxis>	—	XAxis with axis/tick lines removed and 12px text-quaternary ticks. Set dataKey to the category field.
ChartYAxis	React.ComponentProps<typeof YAxis>	—	YAxis pre-styled to match ChartXAxis (no axis/tick lines, 12px ticks).
ChartTooltip	recharts TooltipProps	—	Popover-style tooltip card with a hover cursor band. Wraps recharts Tooltip with a custom content renderer.
ChartLegend	recharts LegendProps	—	Horizontal legend below the plot: a series-color dot plus a text-secondary label per entry. Wraps recharts Legend.
useChartColors	() => ChartColors	—	Hook returning the computed --chart-1..6 series palette plus grid/tick/surface/cursor/label values, kept in sync with light/dark switches.

TreeMap API

A static proportional treemap (role="img") sharing the --chart-1..6 series palette. Extends React.ComponentProps<'div'> minus children; extra div props are forwarded.

Prop / method	Type	Default	Description
data	TreemapProps['data']	—	Flat or nested treemap data; each cell's area is taken from dataKey.
dataKey	TreemapProps['dataKey']	'value'	Field holding the cell area value.
nameKey	TreemapProps['nameKey']	'name'	Field holding the cell label.
aspectRatio	number	—	Target cell aspect ratio passed to recharts squarify.
aria-label	string	—	Required. The map renders as a single role="img" graphic, so it needs a text alternative.
className	string	h-64 w-full	Classes merged onto the wrapper; control height here.