mcpField
C
chart-implementation

chart-implementation

github.com/motormetricsDevelopment2267 installsUpdated today
Repository

About chart-implementation

A chart implementation skill for developers using Recharts and shadcn/ui. It standardizes chart containers, theming, widget layout, and performance practices.

Key features

  1. 01Use ChartContainer and ChartWidget
  2. 02Set colors with CSS variables
  3. 03Configure legend and tooltip labels
  4. 04Memoize data and configuration

Use cases

  1. 01Build consistently styled charts in an app
  2. 02Set chart themes, labels, and tooltips
  3. 03Avoid repeated chart data transformations

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/motormetrics/motormetrics --skill chart-implementation

After installing, type/chart-implementationin Claude Code to confirm it loaded.

Details

From the project README

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";

export function TopMakesChart({ data }: { data: { make: string; count: number }[] }) {
  const chartConfig = {
    count: { label: "Count", color: "var(--chart-1)" },
  };

  return (
    <ChartWidget title="Top Makes" isEmpty={data.length === 0}>
      <ChartContainer config={chartConfig} className="h-[300px] w-full">
        <BarChart data={data}>
          <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-default-200" />
          <XAxis dataKey="make" tickLine={false} axisLine={false} className="text-xs" />
          <YAxis tickLine={false} axisLine={false} className="text-xs" />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Bar dataKey="count" fill="var(--chart-1)" radius={[8, 8, 0, 0]} />
        </BarChart>
      </ChartContainer>
    </ChartWidget>
  );
}

ChartContainer

ChartContainer wraps Recharts' ResponsiveContainer with theming support. Set dimensions via CSS class on the container:

// ✅ Correct - height via className
<ChartContainer config={chartConfig} className="h-[300px] w-full">
  <BarChart data={data}>...</BarChart>
</ChartContainer>

// ❌ Wrong - raw ResponsiveContainer
<ResponsiveContainer width="100%" height={400}>
  <BarChart data={data}>...</BarChart>
</ResponsiveContainer>
Width/Height -1 Warning

Recharts ResponsiveContainer logs width(-1) and height(-1) warnings on first render before ResizeObserver fires. Fix by setting initialDimension on ResponsiveContainer in packages/ui/src/components/chart.tsx:

<RechartsPrimitive.ResponsiveContainer initialDimension={{ width: 0, height: 400 }}>
  {children}
</RechartsPrimitive.ResponsiveContainer>

Reference: shadcn/ui PR #8486, recharts #6716

ChartWidget

Wraps charts in a Card with title, subtitle, empty state, and entrance animation:

<ChartWidget
  title="Registration Trends"
  subtitle="Monthly breakdown"
  isEmpty={data.length === 0}
  emptyMessage="No trend data available"
>
  <ChartContainer ...>...</ChartContainer>
</ChartWidget>

Chart Config

Define chart config for theming and legend/tooltip labels:

const chartConfig = {
  diesel: { label: "Diesel", color: "var(--chart-1)" },
  petrol: { label: "Petrol", color: "var(--chart-2)" },
  electric: { label: "Electric", color: "var(--chart-3)" },
};

Performance

Memoize Data and Config
const chartConfig = useMemo(() => {
  return Object.fromEntries(
    categories.map((category, index) => [
      category,
      { label: category, color: `var(--chart-${index + 1})` },
    ]),
  );
}, [categories]);

Best Practices

  1. ChartContainer - Always use ChartContainer with className="h-[300px] w-full" (never raw ResponsiveContainer)
  2. ChartWidget - Wrap in ChartWidget for consistent card layout and empty states
  3. CSS Variables - Use var(--chart-N) for colors (1-6 available)
  4. Axis styling - Use tickLine={false} axisLine={false} className="text-xs" for clean axes
  5. Grid - Use <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-default-200" />
  6. Tooltips - Use shadcn <ChartTooltip content={<ChartTooltipContent />} />
  7. Memoize - Use useMemo for chart config and data transformations

References

  • Recharts: Use Context7 for latest docs
  • Design Language System: See design-language-system skill for colors
  • Chart component source: packages/ui/src/components/chart.tsx
  • Widget component: apps/web/src/components/charts/widget.tsx

Comments

Markdown supported