Charts

Dashboard chart composition built on the UI chart container and Recharts.

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