Skip to main content
Chart component preview (light)
  • Location: sabo/src/components/ui/chart.tsx

​
When to use

  • Render charts with consistent theming and shared tooltip patterns.
  • Use for data visualization that needs to respect light/dark mode.

​
Usage

import { ChartContainer, type ChartConfig } from "@/components/ui/chart";
import { LineChart, Line, XAxis, YAxis } from "recharts";

const config: ChartConfig = {
  users: { label: "Users", color: "hsl(221.2 83.2% 53.3%)" },
};

export function Example() {
  return (
    <ChartContainer config={config} className="h-64">
      <LineChart data={[{ d: "Mon", users: 10 }, { d: "Tue", users: 20 }]}>
        <XAxis dataKey="d" />
        <YAxis />
        <Line dataKey="users" stroke="var(--color-users)" />
      </LineChart>
    </ChartContainer>
  );
}

​
Key props

​
ChartContainer.config
Record<string, { label?: ReactNode; color?: string } | { label?: ReactNode; theme: Record<'light'|'dark', string> }>
Series config. Injects CSS variables like --color-{key} for use by chart primitives.

​
Key parts

​
ChartTooltip/ChartTooltipContent
Reusable tooltip wrapper and customizable tooltip content renderer.
​
ChartLegend/ChartLegendContent
Legend wrapper and customizable legend content renderer.

​
Styling tip

Define series colors in config for automatic light/dark mode support. 
const config: ChartConfig = {
  users: { label: "Users", color: "hsl(221.2 83.2% 53.3%)" },
};
// Use var(--color-users) in chart components

​
Accessibility

  • Provide descriptive labels in ChartConfig for screen reader context.
  • Use sufficient color contrast and consider patterns/markers for color-blind users.
  • Include a summary or data table alternative for complex charts.