Chart - Sabo

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

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.

​When to use

​Usage

​Key props

​Key parts

​Styling tip

​Accessibility