GitHub

Go to...

Choose a page to open.

Displays data as a chart, built on Recharts.

Chart

chart-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/chart.json

Usage

import { Bar, BarChart } from "recharts";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
const config = {
  desktop: { label: "Desktop", color: "var(--chart-2)" },
} satisfies ChartConfig;

<ChartContainer config={config}>
  <BarChart data={data}>
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
  </BarChart>
</ChartContainer>

The config gives each series a label and a colour. ChartContainer exposes each colour as a --color-<key> variable. The theme defines five chart colours, --chart-1 to --chart-5.

Examples

Area

chart-area