Chart

Beautiful charts. Built using Solid Recharts. Copy and paste into your apps.

The Chart component is built with Solid Recharts, a SolidJS port of Recharts. It provides configuration-aware colors, tooltips, and legends while leaving chart composition in your hands.

Charts work with the rest of the component library and are fully customizable. Browse the complete collection on the Charts page.

Component

Use Solid Recharts primitives to build a chart, then add Zaidan's ChartTooltip and ChartLegend only where they are useful. The wrapper does not hide the underlying chart library, so upgrades and custom composition remain straightforward.

1
import { Bar, BarChart } from "solid-recharts";
2
import {
3
  ChartContainer,
4
  ChartTooltip,
5
  ChartTooltipContent,
6
} from "~/components/ui/chart";
7

8
export function MyChart() {
9
  return (
10
    <ChartContainer config={chartConfig} class="min-h-50">
11
      <BarChart data={data} accessibilityLayer>
12
        <Bar dataKey="value" />
13
        <ChartTooltip content={(props) => <ChartTooltipContent {...props} />} />
14
      </BarChart>
15
    </ChartContainer>
16
  );
17
}

Updating to Solid Recharts

Use var(--chart-1) rather than hsl(var(--chart-1)) when referencing chart tokens. Keep a height, min-h-*, or aspect-* class on ChartContainer so ResponsiveContainer can measure on first render. The Solid port uses class and native Solid event handlers in place of React-only props and synthetic events.

Installation

pnpm dlx shadcn@latest add @zaidan/chart
npx shadcn@latest add @zaidan/chart
yarn dlx shadcn@latest add @zaidan/chart
bunx --bun shadcn@latest add @zaidan/chart

Your First Chart

Build a bar chart with a grid, axis, tooltip, and legend.

Define the data

The following data represents the number of desktop and mobile users for each month. Your data can use any shape; map each field with dataKey.

1
const chartData = [
2
  { month: "January", desktop: 186, mobile: 80 },
3
  { month: "February", desktop: 305, mobile: 200 },
4
  { month: "March", desktop: 237, mobile: 120 },
5
  { month: "April", desktop: 73, mobile: 190 },
6
  { month: "May", desktop: 209, mobile: 130 },
7
  { month: "June", desktop: 214, mobile: 140 },
8
];

Define the chart config

The chart config holds human-readable labels, icons, and color tokens.

1
import type { ChartConfig } from "~/components/ui/chart";
2

3
const chartConfig = {
4
  desktop: { label: "Desktop", color: "#2563eb" },
5
  mobile: { label: "Mobile", color: "#60a5fa" },
6
} satisfies ChartConfig;

Build the chart

Give ChartContainer a height, minimum height, or aspect ratio so its responsive container can measure on first render.

Add a Grid

Add CartesianGrid to show horizontal guides.

1
import { Bar, BarChart, CartesianGrid } from "solid-recharts";
2

3
<ChartContainer config={chartConfig} class="min-h-[200px] w-full">
4
  <BarChart accessibilityLayer data={chartData}>
5
    <CartesianGrid vertical={false} />
6
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
7
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
8
  </BarChart>
9
</ChartContainer>;

Add an Axis

Use XAxis to label the data points.

1
import { Bar, BarChart, CartesianGrid, XAxis } from "solid-recharts";
2

3
<ChartContainer config={chartConfig} class="min-h-[200px] w-full">
4
  <BarChart accessibilityLayer data={chartData}>
5
    <CartesianGrid vertical={false} />
6
    <XAxis
7
      dataKey="month"
8
      tickLine={false}
9
      tickMargin={10}
10
      axisLine={false}
11
      tickFormatter={(value) => String(value).slice(0, 3)}
12
    />
13
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
14
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
15
  </BarChart>
16
</ChartContainer>;

ChartTooltip accepts a function so Solid Recharts can inject its active payload into ChartTooltipContent.

1
import { ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
2

3
<ChartTooltip content={(props) => <ChartTooltipContent {...props} />} />;

Hover a bar to see the tooltip.

Add Legend

Use the same function-form composition to add a legend.

1
import { ChartLegend, ChartLegendContent } from "~/components/ui/chart";
2

3
<ChartLegend content={(props) => <ChartLegendContent {...props} />} />;

Chart Config

Chart config is intentionally decoupled from chart data. This lets labels, icons, colors, and remote data evolve independently.

1
import Monitor from "lucide-solid/icons/monitor";
2
import type { ChartConfig } from "~/components/ui/chart";
3

4
const chartConfig = {
5
  desktop: {
6
    label: "Desktop",
7
    icon: Monitor,
8
    color: "#2563eb",
9
  },
10
  mobile: {
11
    label: "Mobile",
12
    theme: {
13
      light: "#60a5fa",
14
      dark: "#2563eb",
15
    },
16
  },
17
} satisfies ChartConfig;

Theming

Use CSS variables (recommended) or direct hex, hsl, or oklch colors. Reference configured colors in chart primitives as var(--color-KEY).

CSS Variables

Define chart tokens in your CSS, then reference them from the config.

1
:root {
2
  --chart-1: oklch(0.646 0.222 41.116);
3
  --chart-2: oklch(0.6 0.118 184.704);
4
}
5

6
.dark {
7
  --chart-1: oklch(0.488 0.243 264.376);
8
  --chart-2: oklch(0.696 0.17 162.48);
9
}

1
const chartConfig = {
2
  desktop: { label: "Desktop", color: "var(--chart-1)" },
3
  mobile: { label: "Mobile", color: "var(--chart-2)" },
4
} satisfies ChartConfig;

Direct colors

Use the color format that fits your application when CSS tokens are not appropriate.

1
const chartConfig = {
2
  desktop: { label: "Desktop", color: "#2563eb" },
3
  mobile: { label: "Mobile", color: "hsl(220 98% 61%)" },
4
  tablet: { label: "Tablet", color: "oklch(0.5 0.2 240)" },
5
  laptop: { label: "Laptop", color: "var(--chart-2)" },
6
} satisfies ChartConfig;

Using colors

Use var(--color-KEY) in chart components, data, and Tailwind classes.

<Bar dataKey="desktop" fill="var(--color-desktop)" />

1
const chartData = [
2
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
3
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
4
];

<LabelList class="fill-(--color-desktop)" />

Use hideLabel, hideIndicator, and indicator to customize tooltip content. Use labelKey and nameKey when the chart data uses different field names.

<ChartTooltip
  content={(props) => (
    <ChartTooltipContent {...props} labelKey="visitors" nameKey="browser" />
  )}
/>

Prop	Type	Description
`labelKey`	`string`	Config or data key to use for the label.
`nameKey`	`string`	Config or data key to use for the name.
`indicator`	`"dot" \| "line" \| "dashed"`	Indicator style.
`hideLabel`	`boolean`	Hides the label.
`hideIndicator`	`boolean`	Hides the indicator.

Colors

Tooltip colors are resolved automatically from chartConfig.

Custom keys

Pass labelKey and nameKey when data uses a different key for the tooltip label or series name.

1
const chartData = [
2
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
3
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
4
];
5

6
const chartConfig = {
7
  visitors: { label: "Total Visitors" },
8
  chrome: { label: "Chrome", color: "var(--chart-1)" },
9
  safari: { label: "Safari", color: "var(--chart-2)" },
10
} satisfies ChartConfig;

Legend

import { ChartLegend, ChartLegendContent } from "~/components/ui/chart";

<ChartLegend
  content={(props) => <ChartLegendContent {...props} nameKey="browser" />}
/>;

nameKey maps a legend item to a different config key.

Colors

Colors are automatically referenced from the chart config.

Custom keys

1
const chartData = [
2
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
3
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
4
];
5

6
const chartConfig = {
7
  chrome: { label: "Chrome", color: "var(--chart-1)" },
8
  safari: { label: "Safari", color: "var(--chart-2)" },
9
} satisfies ChartConfig;
10

11
<ChartLegend
12
  content={(props) => <ChartLegendContent {...props} nameKey="browser" />}
13
/>;

Accessibility

Set accessibilityLayer on the Solid Recharts chart component to enable its keyboard navigation and screen-reader descriptions.

<BarChart accessibilityLayer data={chartData}>
  {/* ... */}
</BarChart>

API Reference

Chart composes Solid Recharts, whose chart primitives preserve the Recharts API. Refer to that API and the exported Zaidan ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, and ChartLegendContent types for composition details.