Chart

Installation

npx shadcn@latest add @uqudo/chart

The charts themselves come from Recharts, which is added as an npm dependency. This item only ships the container, tooltip and legend wrappers that make Recharts match the rest of the design system.

Usage

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/uqudo/ui/chart"

Start with a config. Each key is a series in your data; the label is shown in tooltips and legends, and the color is exposed to the chart as var(--color-<key>):

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

Then wrap any Recharts chart in ChartContainer. Give it an explicit height, because the container is what makes the chart responsive:

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

Examples

Line

Any Recharts chart works. Swap BarChart for LineChart and use indicator="line" on the tooltip.

Legend

Add ChartLegend with ChartLegendContent to render the labels and colors from the config below the chart.

API Reference

ChartConfig

A record keyed by series name. Every entry takes an optional label and icon, plus either a single color or a per-theme theme map.

ChartContainer

Provides the config to its descendants, injects the --color-* variables and wraps children in a Recharts ResponsiveContainer.

ChartTooltip

An alias of Recharts Tooltip. Pass <ChartTooltipContent /> to content.

ChartTooltipContent

ChartLegend

An alias of Recharts Legend. Pass <ChartLegendContent /> to content.

ChartLegendContent

ChartStyle

Renders the <style> tag with the --color-* variables for a config. It is called by ChartContainer for you; use it directly only when you build your own container.