Skip to main content
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

1

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.
2

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 },
];
3

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.
4

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