Chart

A composable charting wrapper built on Recharts with themed colors, accessible tooltips, and a legend system.

When to use

Dashboards displaying key metrics and KPIs.
Analytics pages visualizing user activity or revenue trends.
Data visualization comparing multiple data series.
Trend monitoring tracking values over time.

When NOT to use

For real-time streaming data — use a dedicated real-time charting library.
For 3D visualizations — use a WebGL-based library.
For simple single numbers — use a stat card instead.

Import

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  type ChartConfig,
} from '@mihcm/ui/Chart';
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';

Basic usage

Define a ChartConfig mapping each data key to a label and color, then wrap a Recharts chart in ChartContainer.

const config = {
  desktop: { label: 'Desktop', color: 'var(--color-primary)' },
  mobile: { label: 'Mobile', color: 'var(--color-accent)' },
} satisfies ChartConfig;
 
<ChartContainer config={config} className="h-[300px]">
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
  </BarChart>
</ChartContainer>

Full Recharts API

ChartContainer is the theme and responsive shell. It does not hide Recharts capability or replace Recharts props. Import the exact Recharts primitives you need and pass their native props directly:

import {
  Area,
  AreaChart,
  Brush,
  CartesianGrid,
  ReferenceLine,
  XAxis,
  YAxis,
} from 'recharts';
 
<ChartContainer config={config} className="h-[360px]">
  <AreaChart
    accessibilityLayer
    data={data}
    margin={{ left: 12, right: 12 }}
    syncId="pipeline"
    onMouseMove={(state) => {
      console.log(state.activeLabel);
    }}
  >
    <CartesianGrid vertical={false} />
    <XAxis dataKey="week" tickLine={false} axisLine={false} interval={0} />
    <YAxis
      width={40}
      tickLine={false}
      axisLine={false}
      domain={[0, 'dataMax + 100']}
      tickFormatter={(value) => value.toLocaleString()}
    />
    <ReferenceLine y={700} stroke="var(--color-warning)" strokeDasharray="4 4" />
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
    <Brush dataKey="week" height={24} travellerWidth={8} />
    <Area
      dataKey="inbound"
      type="natural"
      stackId="pipeline"
      fill="var(--color-inbound)"
      stroke="var(--color-inbound)"
      isAnimationActive
      animationDuration={450}
    />
  </AreaChart>
</ChartContainer>

Use this model for every Recharts capability: all chart roots, Cartesian and polar axes, grids, annotations, brush/zoom interactions, custom shapes, custom labels, event handlers, sync groups, animation props, and Recharts hooks. The MiHCM layer supplies tokens and accessible tooltip/legend defaults; Recharts owns the chart behaviour.

Adding a legend

Drop ChartLegend inside the chart — it reads labels and colors from the config automatically.

<ChartContainer config={config}>
  <BarChart data={data}>
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
  </BarChart>
</ChartContainer>

Composition

Define a ChartConfig mapping each data key to a label and color. Colors become CSS custom properties (e.g. var(--color-desktop)).
ChartContainer wraps Recharts in a ResponsiveContainer — set a height via className="h-[300px]".
ChartTooltip with ChartTooltipContent renders accessible, DOM-based tooltips (not canvas).
ChartLegend with ChartLegendContent reads labels from the config automatically.
Axis, grid, series, reference, brush, sync, animation, formatter, and event props stay on the Recharts primitives.

StatCard — single metric with change indicators.
Card — container for embedding charts in dashboards.