Chart

Themed charts for dashboards and product analytics.

Overview

Chart wraps recharts with Vinyaas theme tokens. Pass a config object to ChartContainer, then use var(--color-<key>) for strokes and fills. Chart tokens are primary-adjacent greys — similar to --primary, not derived from it with color-mix. Map --chart-1 through --chart-5 in @theme as --color-chart-*.

Line, bar, area, radar, and radial charts all share the same container. Prefer foreground-filled dots on lines and set activeBar={false} when you do not want hover fills on bars.

Preview

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add chart

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";

const data = [
  { month: "Jan", revenue: 12400 },
  { month: "Feb", revenue: 13850 },
  { month: "Mar", revenue: 15200 },
];

const config = {
  revenue: {
    label: "Revenue",
    color: "var(--color-chart-1)",
  },
} satisfies ChartConfig;

export function RevenueChart() {
  return (
    <ChartContainer config={config} className="h-48 w-full max-w-lg">
      <LineChart data={data} accessibilityLayer>
        <CartesianGrid vertical={false} strokeDasharray="3 3" />
        <XAxis dataKey="month" tickLine={false} axisLine={false} />
        <YAxis hide />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Line
          dataKey="revenue"
          type="monotone"
          stroke="var(--color-revenue)"
          strokeWidth={2}
          dot={{
            r: 4,
            fill: "var(--color-foreground)",
            stroke: "var(--color-revenue)",
            strokeWidth: 2,
          }}
          activeDot={{
            r: 6,
            fill: "var(--color-foreground)",
            stroke: "var(--color-revenue)",
            strokeWidth: 2,
          }}
        />
      </LineChart>
    </ChartContainer>
  );
}

Examples

Line chart

Monthly revenue with foreground-filled dots and a larger active hover state.

Bar chart

Animated weekly active users. Hover does not restyle the bar fill.

Horizontal bar chart

Set layout="vertical" on BarChart to draw bars left to right. Put the numeric axis on X and the category axis on Y, and keep the Y axis visible so labels read naturally.

Area chart

Signup trend with a soft fill using chart tokens.

Legend and tooltip

Two series with labels from ChartConfig.

Radar chart

Reusable quality scores across product surfaces.

Radial chart

Concentric quality scores across docs, CLI, theme, a11y, and mobile.

In practice

A dashboard card wraps the chart, badge, and export action in one composition.

Monthly revenue

Last three closed months.

+12.4%

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`config`	ChartConfig	—	Maps data keys to labels and theme colors. Colors become CSS variables on the container.
`className`	string	—	On ChartContainer, sets height and width via Tailwind utilities.
`content`	ReactNode	—	On ChartTooltip, pass ChartTooltipContent for themed tooltips.

Accessibility

Pass accessibilityLayer to Recharts chart components for keyboard focus on chart geometry where supported.
Provide a visible title and description in surrounding copy or Card headers. Tooltips supplement but do not replace textual context.
Use distinct series labels in ChartConfig so legends and tooltips are not color-only.