Chart Implementation Skill

Uses Recharts via shadcn/ui ChartContainer for data visualization. Always use CSS variables for colors (see design-language-system skill).

Core Pattern

All charts use ChartContainer from @sgcarstrends/ui/components/chart wrapped in ChartWidget from @web/components/charts/widget. Never use raw ResponsiveContainer directly.

"use client";

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@sgcarstrends/ui/components/chart";
import { ChartWidget } from "@web/components/charts/widget";
import { BarChart, Bar, CartesianGrid, XAxis, YAxis } from "recharts";