Skip to content

Chart

Bar, line and area charts on the chart tokens. Every chart has a title and a summary; more than one series gets a legend, and the tooltip names each series. Focus a chart and use the arrow keys to move between points.

Sourcecomponents/chart.tsx

Bar chart, two series

Visits and sign-ups, January to June

Visits peaked at 305 in February; sign-ups peaked at 200 the same month.

Line chart, one series, title for screen readers only

Monthly revenue, January to June

Revenue grew every month but March, from $4,200 to $7,100.

Usage

Chart usage
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/chart";import type { ChartConfig } from "@/components/chart";
const config = {  visits: { label: "Visits", color: "var(--color-chart-1)" },  signups: { label: "Sign-ups", color: "var(--color-chart-2)" },} satisfies ChartConfig;
export function ChartUsage({ data }: { data: { month: string; visits: number; signups: number }[] }) {  return (    <ChartContainer config={config} title="Visits and sign-ups, last 6 months" description="Visits rose from 186 in January to 214 in June.">      <BarChart data={data}>        <CartesianGrid vertical={false} />        <XAxis dataKey="month" tickLine={false} axisLine={false} />        <ChartTooltip content={<ChartTooltipContent />} />        <ChartLegend content={<ChartLegendContent />} />        <Bar dataKey="visits" fill="var(--color-visits)" radius={4} />        <Bar dataKey="signups" fill="var(--color-signups)" radius={4} />      </BarChart>    </ChartContainer>  );}

When to use

Use when

Showing a trend or a comparison: bars, lines, areas. Always give a title and a one-line description; colors from chart-1…chart-5; a legend when there's more than one series. Requires recharts and react-is

Don’t use when

Exact values the user must read or compare (use Table, or put one beside the chart); a single number (show the number); color as the only way to tell series apart