stack/packages/mosaic/framework/skills/shadcn-ui/references/chart.md

shadcn/ui Chart Component - Installation

Source: https://ui.shadcn.com/docs/components/chart

The chart component in shadcn/ui is built on Recharts, providing direct access to all Recharts capabilities with consistent theming.

npx shadcn@latest add chart

---

shadcn/ui Chart Component - Basic Usage

Source: https://ui.shadcn.com/docs/components/chart

The ChartContainer wraps your Recharts component and accepts a config prop for theming. Requires min-h-[value] for responsiveness.

import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
import { ChartContainer, ChartTooltipContent } from '@/components/ui/chart';

const chartConfig = {
  desktop: {
    label: 'Desktop',
    color: 'var(--chart-1)',
  },
  mobile: {
    label: 'Mobile',
    color: 'var(--chart-2)',
  },
} satisfies import('@/components/ui/chart').ChartConfig;

const chartData = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
];

export function BarChartDemo() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
      <BarChart data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  );
}

---

shadcn/ui Chart Component - ChartConfig with Custom Colors

Source: https://ui.shadcn.com/docs/components/chart

You can define custom colors directly in the configuration using hex values or CSS variables.

const chartConfig = {
  desktop: {
    label: 'Desktop',
    color: '#2563eb',
    theme: {
      light: '#2563eb',
      dark: '#60a5fa',
    },
  },
  mobile: {
    label: 'Mobile',
    color: 'var(--chart-2)',
  },
} satisfies import('@/components/ui/chart').ChartConfig;

---

shadcn/ui Chart Component - CSS Variables

Source: https://ui.shadcn.com/docs/components/chart

Add chart color variables to your globals.css for consistent theming.

:root {
  /* Chart colors */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.546 0.198 38.228);
  --chart-4: oklch(0.596 0.151 343.253);
  --chart-5: oklch(0.546 0.158 49.157);
}

.dark {
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.698 0.141 24.311);
  --chart-4: oklch(0.676 0.172 171.196);
  --chart-5: oklch(0.578 0.192 302.85);
}

---

shadcn/ui Chart Component - Line Chart Example

Source: https://ui.shadcn.com/docs/components/chart

Creating a line chart with shadcn/ui charts component.

import { Line, LineChart, CartesianGrid, XAxis, YAxis } from 'recharts';
import { ChartContainer, ChartTooltipContent } from '@/components/ui/chart';

const chartConfig = {
  price: {
    label: 'Price',
    color: 'var(--chart-1)',
  },
} satisfies import('@/components/ui/chart').ChartConfig;

const chartData = [
  { month: 'January', price: 186 },
  { month: 'February', price: 305 },
  { month: 'March', price: 237 },
  { month: 'April', price: 203 },
  { month: 'May', price: 276 },
];

export function LineChartDemo() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px]">
      <LineChart data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <YAxis tickLine={false} axisLine={false} tickFormatter={(value) => `$${value}`} />
        <Line dataKey="price" stroke="var(--color-price)" strokeWidth={2} dot={false} />
        <ChartTooltip content={<ChartTooltipContent />} />
      </LineChart>
    </ChartContainer>
  );
}

---

shadcn/ui Chart Component - Area Chart Example

Source: https://ui.shadcn.com/docs/components/chart

Creating an area chart with gradient fill and legend.

import { Area, AreaChart, XAxis, YAxis } from 'recharts';
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltipContent,
} from '@/components/ui/chart';

const chartConfig = {
  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--chart-2)' },
} satisfies import('@/components/ui/chart').ChartConfig;

export function AreaChartDemo() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px]">
      <AreaChart data={chartData}>
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <YAxis tickLine={false} axisLine={false} />
        <Area
          dataKey="desktop"
          fill="var(--color-desktop)"
          stroke="var(--color-desktop)"
          fillOpacity={0.3}
        />
        <Area
          dataKey="mobile"
          fill="var(--color-mobile)"
          stroke="var(--color-mobile)"
          fillOpacity={0.3}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
      </AreaChart>
    </ChartContainer>
  );
}

---

shadcn/ui Chart Component - Pie Chart Example

Source: https://ui.shadcn.com/docs/components/chart

Creating a pie/donut chart with shadcn/ui.

import { Pie, PieChart } from 'recharts';
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltipContent,
} from '@/components/ui/chart';

const chartConfig = {
  chrome: { label: 'Chrome', color: 'var(--chart-1)' },
  safari: { label: 'Safari', color: 'var(--chart-2)' },
  firefox: { label: 'Firefox', color: 'var(--chart-3)' },
} satisfies import('@/components/ui/chart').ChartConfig;

const pieData = [
  { browser: 'Chrome', visitors: 275, fill: 'var(--color-chrome)' },
  { browser: 'Safari', visitors: 200, fill: 'var(--color-safari)' },
  { browser: 'Firefox', visitors: 187, fill: 'var(--color-firefox)' },
];

export function PieChartDemo() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px]">
      <PieChart>
        <Pie
          data={pieData}
          dataKey="visitors"
          nameKey="browser"
          cx="50%"
          cy="50%"
          outerRadius={80}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
      </PieChart>
    </ChartContainer>
  );
}

---

shadcn/ui ChartTooltipContent Props

Source: https://ui.shadcn.com/docs/components/chart

The ChartTooltipContent component accepts these props for customizing tooltip behavior.

Prop	Type	Default	Description
labelKey	string	"label"	Key for tooltip label
nameKey	string	"name"	Key for tooltip name
indicator	"dot" | "line" | "dashed"	"dot"	Indicator style
hideLabel	boolean	false	Hide label
hideIndicator	boolean	false	Hide indicator

---

shadcn/ui Chart Component - Accessibility

Source: https://ui.shadcn.com/docs/components/chart

Enable keyboard navigation and screen reader support by adding the accessibilityLayer prop.

<BarChart accessibilityLayer data={chartData}>
  <CartesianGrid vertical={false} />
  <XAxis dataKey="month" />
  <Bar dataKey="desktop" fill="var(--color-desktop)" />
  <ChartTooltip content={<ChartTooltipContent />} />
</BarChart>

This adds:

• Keyboard arrow key navigation
• ARIA labels for chart elements
• Screen reader announcements for data values

---

shadcn/ui Chart Component - Recharts Dependencies

Source: https://ui.shadcn.com/docs/components/chart

The chart component requires the following Recharts dependencies to be installed.

pnpm add recharts
npm install recharts
yarn add recharts

Recharts provides the following chart types:

• Area, Bar, Line, Pie, Composed
• Radar, RadialBar, Scatter
• Funnel, Treemap