Chart

Import

Charts live behind their own entry, @comitor/ui/chart, because recharts is a heavy optional peer (~100 KB) and most pages never draw a chart. Nothing here is re-exported from the main @comitor/ui barrel.

The entry ships two layers. Ready-made: ComitorLineChart, ComitorBarChart, ComitorAreaChart — axes, grid, tooltip, and palette already chosen. Primitive: the shadcn ChartContainer family, where you assemble recharts yourself.

Line Chart

Use ComitorLineChart for trend data over time.

Bar Chart

Use ComitorBarChart for categorical comparisons. Its grid draws horizontal lines only.

Area Chart

Use ComitorAreaChart for cumulative or volume data. The fill sits at fillOpacity 0.15 so overlapping areas stay readable.

Stacked Bar

Pass stacked to stack multiple series. ComitorAreaChart takes the same prop; ComitorLineChart does not.

Only the top of a stack is rounded. Since 1.5.0 ComitorBarChart gives radius={[4, 4, 0, 0]} to the last series in series — the segment recharts draws on top — and radius={0} to the ones beneath it. Rounding every segment, as it used to, put two rounded corners directly under the next segment, so each junction showed a notch and the column read as a stack of loose pieces rather than one bar. Unstacked bars are unchanged: every bar keeps its two rounded top corners.

Legend

showLegend puts a legend under the plot area of all three wrappers. Since 1.5.0 what it mounts is ComitorChartLegend, a token-styled legend cut to the same pattern as ComitorChartTooltip, rather than the bare recharts <Legend />. It is exported on its own too, for charts you assemble yourself.

Value formatting

Tooltip values fall back to value.toLocaleString('vi-VN') — the package's default locale. Pass valueFormatter to add units or switch locale. Hover a bar to see it.

Animation

All three wrappers accept isAnimationActive and default it to false — the opposite of the recharts default, deliberately.

import { ComitorBarChart } from '@comitor/ui/chart'

// Default: no draw-on animation, the chart is painted on first frame.
<ComitorBarChart data={data} xAxisKey="month" series={series} />

// Opt back in — only safe on recharts 3.x.
<ComitorBarChart data={data} xAxisKey="month" series={series} isAnimationActive />

Low-level primitives

For chart shapes the three wrappers do not cover, use the shadcn primitives: ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, and the useChart hook. ChartContainer renders a ChartStyle tag that emits a --color-<key> variable per config key, scoped to [data-chart=<id>] — so series colours stay in tokens instead of hex literals in JSX, and a key declaring theme: { light, dark } switches with the theme.

ChartTooltipContent reads labels from config and takes hideLabel, hideIndicator, indicator ('dot' | 'line' | 'dashed'), nameKey, and labelKey. Like the Comitor tooltip it prints numbers with toLocaleString('vi-VN') unless you pass a formatter.

ComitorChartContainer & ComitorChartTooltip

The pieces the three wrappers are built from are exported on their own. ComitorChartContainer is a fixed-height ResponsiveContainer and nothing else — no config context, no --color-<key> variables. ComitorChartTooltip is the token-styled tooltip; hand it to recharts as an element, not a component. The third piece, ComitorChartLegend, is documented under Legend above.

import { ComitorChartContainer, ComitorChartTooltip } from '@comitor/ui/chart'
import { Pie, PieChart, Tooltip } from 'recharts'

// ComitorChartContainer only sizes the ResponsiveContainer — no config,
// no --color-<key> variables. Use it when you want the Comitor tooltip
// on a chart shape the three wrappers do not cover.
export function Example() {
  return (
    <ComitorChartContainer height={280}>
      <PieChart>
        <Pie data={data} dataKey="revenue" nameKey="month" isAnimationActive={false} />
        <Tooltip content={<ComitorChartTooltip valueFormatter={usd} />} />
      </PieChart>
    </ComitorChartContainer>
  )
}

Color palette

The CHART_COLORS export names the palette in CSS variables. Five of its keys — gold, teal, navy, green, red — point at --chart-1…5 rather than at brand variables, so an app can retheme its charts by overriding those five without touching the brand palette. The two remaining keys are shortcuts to the brand scales instead: goldLight is --gold-100 and ash is --ash-300, so they do not follow a --chart-* override.

ChartColorName, exported from the same entry, is the key type of that object — 'gold' | 'goldLight' | 'teal' | 'navy' | 'green' | 'red' | 'ash'. Reach for it when a tone travels through your own types before it becomes a colour — a config object, a status map, a prop that picks a series colour. Type that field as ChartColorName rather than string and a misspelled tone is a build error, which is worth having because the runtime failure is a quiet one: an unknown key reads back undefined, and a series whose color is undefined does not throw — it takes the next rotation colour, so the chart draws fine and is merely the wrong colour.

import { CHART_COLORS, ComitorBarChart } from '@comitor/ui/chart'
import type { ChartColorName } from '@comitor/ui/chart'

// Name the tone in your own data instead of the CSS variable, and a typo
// is a build error rather than a series that silently falls back to the
// CHART_SERIES_COLORS rotation.
type Metric = { key: string; name: string; tone: ChartColorName }

const METRICS: Metric[] = [
  { key: 'revenue', name: 'Revenue', tone: 'gold' },
  { key: 'users', name: 'Users', tone: 'teal' },
]

export function Example() {
  return (
    <ComitorBarChart
      data={data}
      xAxisKey="month"
      series={METRICS.map(({ key, name, tone }) => ({ key, name, color: CHART_COLORS[tone] }))}
      height={300}
    />
  )
}

A series with no color falls back to CHART_SERIES_COLORS, rotated by index.

Both constants live in a plain module with no 'use client' directive, so a Server Component can read their real values. That matters: everything exported through a client module arrives at the server as a client-reference proxy, which would make CHART_COLORS.gold read undefined with no error while TypeScript still reported a literal type. Building a series array in a server page is therefore safe. The key named gray in older copies is now ash.

Props (shared)

Shared by ComitorLineChart, ComitorBarChart, and ComitorAreaChart.

DataSeries

Accessibility

• Charts are visual — provide a text summary or data table alternative for screen readers.
• The wrappers do not enable recharts' accessibilityLayer, so the tooltip follows the pointer and is not reachable by keyboard. Pair any chart that carries real information with a table or a written summary.
• Do not rely on hue alone to tell series apart — turn on showLegend, or give each series a distinct name that the tooltip can announce.
• Legend labels are ordinary text, not coloured text: the swatch carries the series colour and the label uses text-foreground, 17.4:1 on --card in the default palette. A hand-rolled <Legend /> gives that contrast away — see Legend above.
• The --chart-* steps are fill colours sized for large areas: on white, --chart-1 measures 1.86:1 and --chart-4 3.13:1. WCAG does not demand 3:1 of a large labelled fill, but it does of thin marks — for 1–2 px strokes and dots prefer the matching ink token (--teal-ink, --green-ink, --red-ink).
• --chart-3 resolves to --navy-ink precisely so it survives dark mode — raw navy sits at 1.15:1 against the dark background.