Chart

The chart.tsx module wraps Recharts components with a theme-aware ChartContainer and accessory components for tooltips and legends. All charts automatically adapt to light and dark mode.

Interactive example#

Chart · Live example

Show planned work

Switch chart types, show a second series, and hover a data point for its tooltip.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Install chart primitives#

If your application imports primitives such as AreaChart or Bar directly, declare Recharts as a direct dependency. This is important with package managers that isolate transitive dependencies.

Bash

pnpm add recharts@3.10.1

Import#

TSX

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ThemedCartesianGrid,
  ThemedXAxis,
  ThemedYAxis,
  ThemedPolarGrid,
} from '@clidey/ux';

You can still import chart primitives from Recharts directly, but the themed wrappers above are recommended for consistent styling:

TSX

import {
  BarChart, Bar, LineChart, Line, AreaChart, Area,
  PieChart, Pie, Cell,
  XAxis, YAxis, CartesianGrid, ResponsiveContainer,
} from 'recharts';

ChartConfig#

Define a ChartConfig to map data keys to labels and colors:

TSX

import type { ChartConfig } from '@clidey/ux';

const chartConfig: ChartConfig = {
  revenue: {
    label: 'Revenue',
    color: 'var(--chart-1)',
  },
  expenses: {
    label: 'Expenses',
    color: 'var(--chart-2)',
  },
};

Bar chart#

TSX

const data = [
  { month: 'Jan', revenue: 4200, expenses: 2400 },
  { month: 'Feb', revenue: 3800, expenses: 1398 },
  { month: 'Mar', revenue: 5200, expenses: 3200 },
  { month: 'Apr', revenue: 4700, expenses: 2800 },
  { month: 'May', revenue: 6100, expenses: 2100 },
  { month: 'Jun', revenue: 5800, expenses: 2600 },
];

<ChartContainer config={chartConfig} className="h-64">
  <BarChart data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
    <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
  </BarChart>
</ChartContainer>

Line chart#

TSX

const lineData = [
  { week: 'W1', users: 100 },
  { week: 'W2', users: 145 },
  { week: 'W3', users: 132 },
  { week: 'W4', users: 210 },
  { week: 'W5', users: 198 },
];

const lineConfig: ChartConfig = {
  users: { label: 'Active Users', color: 'var(--chart-1)' },
};

<ChartContainer config={lineConfig} className="h-48">
  <LineChart data={lineData}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="week" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Line
      type="monotone"
      dataKey="users"
      stroke="var(--color-users)"
      strokeWidth={2}
      dot={false}
    />
  </LineChart>
</ChartContainer>

Pie chart#

TSX

const pieData = [
  { name: 'Frontend', value: 42, color: 'var(--chart-1)' },
  { name: 'Backend', value: 31, color: 'var(--chart-2)' },
  { name: 'Mobile', value: 15, color: 'var(--chart-3)' },
  { name: 'DevOps', value: 12, color: 'var(--chart-4)' },
];

const pieConfig: ChartConfig = {
  Frontend: { label: 'Frontend', color: 'var(--chart-1)' },
  Backend: { label: 'Backend', color: 'var(--chart-2)' },
  Mobile: { label: 'Mobile', color: 'var(--chart-3)' },
  DevOps: { label: 'DevOps', color: 'var(--chart-4)' },
};

<ChartContainer config={pieConfig} className="h-48">
  <PieChart>
    <Pie data={pieData} cx="50%" cy="50%" outerRadius={80} dataKey="value">
      {pieData.map((entry) => (
        <Cell key={entry.name} fill={entry.color} />
      ))}
    </Pie>
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
  </PieChart>
</ChartContainer>

ChartTooltipContent Props#

Prop	Type	Default	Description
`hideLabel`	`boolean`	`false`	Hides the series label in the tooltip.
`hideIndicator`	`boolean`	`false`	Hides the color dot/line indicator.
`indicator`	`"line" \| "dot" \| "dashed"`	`"dot"`	Style of the color indicator.
`nameKey`	`string`	—	Key used to look up the series name from config.
`labelKey`	`string`	—	Key used for the tooltip's X-axis label.

ChartContainer Props#

Prop	Type	Description
`config`	`ChartConfig`	Maps data keys to labels and colors.
`className`	`string`	Sets container size (use `h-*` utilities).
`children`	`ReactNode`	Recharts chart component.

ChartConfig type#

TSX

type ChartConfig = {
  [key: string]: {
    label?: string;
    icon?: React.ComponentType;
    color?: string;
  };
};

Keys and colors are written into a <style> element, so they are validated before use. A key must be a plain identifier ([A-Za-z0-9_-]), and a color may only contain the characters CSS color syntaxes need: hex, rgb(), hsl(), oklch(), var(--name), and keywords all work. Entries that fail validation are dropped from the stylesheet instead of rendered. Keep this in mind when building a config from API data or user-defined dashboards.

Themed axis and grid components#

The library exports pre-styled wrappers for Recharts grid and axis primitives. These automatically apply theme-aware colors so charts look correct in both light and dark mode without manual styling.

Component	Wraps	Default styling
`ThemedCartesianGrid`	`CartesianGrid`	Uses `--border` color at 50% opacity.
`ThemedXAxis`	`XAxis`	Tick text uses `--muted-foreground`; hides tick lines and axis line.
`ThemedYAxis`	`YAxis`	Tick text uses `--muted-foreground`; hides tick lines and axis line.
`ThemedPolarGrid`	`PolarGrid`	Uses `--border` color for grid lines.

Usage

Replace raw Recharts primitives with the themed versions:

TSX

<ChartContainer config={chartConfig} className="h-64">
  <BarChart data={data}>
    <ThemedCartesianGrid strokeDasharray="3 3" />
    <ThemedXAxis dataKey="month" />
    <ThemedYAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
  </BarChart>
</ChartContainer>

All standard Recharts props are forwarded, so you can override any defaults when needed.

Keep the ChartConfig object in application state or a shared module when several chart components need the same labels and colors. Pass it to ChartContainer; the internal chart context is not part of the package's public exports.

Was this page helpful?