Components

Chart

Themed chart components built on Recharts. Includes Line, Bar, and Area variants with consistent styling and custom tooltips.

Line Chart

Use ComitorLineChart for trend data over time.

Bar Chart

Use ComitorBarChart for categorical comparisons.

Area Chart

Use ComitorAreaChart for cumulative or volume data.

Stacked Bar

Pass stacked to stack multiple series.

Color palette

The CHART_COLORS export provides themed colors that use CSS variables.

gold
goldLight
teal
navy
red
green
gray

Props (shared)

PropTypeDefaultDescription
datarequiredRecord<string, unknown>[]Array of data points.
xAxisKeyrequiredstringKey for X-axis values.
seriesrequiredDataSeries[]Array of { key, name?, color? } for each line/bar/area.
heightnumber | string300Chart container height.
showGridbooleantrueShow cartesian grid.
showLegendbooleanfalseShow legend below chart.
valueFormatter(value: number) => stringFormat tooltip values.

Accessibility

  • Charts are visual — provide a text summary or data table alternative for screen readers.
  • Tooltips are keyboard-accessible when navigating data points.
  • Use meaningful color contrast — the default palette meets WCAG AA for data visualization.