Charts - Sabo

Location: sabo/src/components/dashboard/chart-area-interactive.tsx

When to use

Visualize KPIs and time-series within dashboard sections.

Usage

// Uses <ChartContainer> + Recharts
import { ChartContainer, type ChartConfig } from "@/components/ui/chart";
import { AreaChart, Area, XAxis, YAxis, Tooltip } from "recharts";

const config: ChartConfig = {
  revenue: { label: "Revenue", color: "hsl(142.1 76.2% 36.3%)" },
};
const data = [
  { d: "Mon", revenue: 1000 },
  { d: "Tue", revenue: 1200 },
  { d: "Wed", revenue: 800 },
];

export function RevenueChart() {
  return (
    <ChartContainer config={config} className="h-64">
      <AreaChart data={data}>
        <XAxis dataKey="d" />
        <YAxis />
        <Tooltip />
        <Area dataKey="revenue" stroke="var(--color-revenue)" fill="var(--color-revenue)" fillOpacity={0.15} />
      </AreaChart>
    </ChartContainer>
  );
}

Styling tip

Define series colors via ChartContainer config for light/dark theme parity.

Key features

Theme-aware colors: Define colors via ChartConfig for automatic light/dark mode support
Recharts integration: Uses Recharts components (AreaChart, LineChart, BarChart) inside ChartContainer
Interactive: Supports tooltips, legends, and click handlers
Responsive: Container queries adjust sizing based on available space

Steps

Create chart config

Define series with labels and colors. Colors can be simple strings or theme-specific objects:

const config: ChartConfig = {
  revenue: { 
    label: "Revenue", 
    color: "hsl(142.1 76.2% 36.3%)" 
  },
  // Or theme-specific:
  users: {
    label: "Users",
    theme: {
      light: "hsl(221.2 83.2% 53.3%)",
      dark: "hsl(217.2 91.2% 59.8%)"
    }
  }
};

Use CSS variables like var(--color-revenue) in Recharts components to reference these colors.

Prepare data

Start with static arrays. Later, fetch from Supabase or your API. Ensure keys match ChartConfig series names.

const data = [
  { date: "2024-01", revenue: 1000, users: 45 },
  { date: "2024-02", revenue: 1200, users: 52 },
];

Format axes and tooltips

Use Recharts’ tickFormatter for axes and Tooltip content formatters:

<XAxis 
  dataKey="date" 
  tickFormatter={(value) => new Date(value).toLocaleDateString('en-US', { month: 'short' })}
/>
<YAxis 
  tickFormatter={(value) => new Intl.NumberFormat('en-US', { notation: 'compact' }).format(value)}
/>

Use Intl.NumberFormat and Intl.DateTimeFormat for locale-aware, accessible formatting.

Add interactivity

Enable tooltips, legends, and click handlers for drill-down:

<ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dot" />} />
<ChartLegend content={<ChartLegendContent />} />
<Area 
  onClick={(data) => console.log('Clicked:', data)}
/>

Troubleshooting

Colors not changing with theme
- Ensure you’re using var(--color-{series}) in Recharts components
Chart not responsive
- Wrap in ChartContainer with className height/width
Data not showing
- Verify dataKey props match your data object keys exactly

​When to use

​Usage

​Styling tip

​Key features

​Steps

​Troubleshooting

When to use

Usage

Styling tip

Key features

Steps

Troubleshooting