Chart

Beautiful charts built using Recharts.

Bar Chart

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart data={chartData}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Installation

pnpm dlx cubix@latest add chart --base aria

About

Chart is a collection of composable helpers built on top of Recharts. We do not wrap Recharts, so you are never locked into an abstraction. The chart components only add theming, tooltips, and legends on top of the Recharts primitives you already know.

Usage

Import

import { Bar, BarChart } from "recharts"

import { ChartContainer, ChartTooltipContent } from "@/components/cubix/chart"

Example

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart data={chartData}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Composition

Build your chart from Recharts components and only bring in the chart helpers where you need them:

ChartContainer
├── ChartStyle
├── <Recharts chart>
│   ├── ChartTooltip
│   │   └── ChartTooltipContent
│   └── ChartLegend
│       └── ChartLegendContent

Your First Chart

Data

Your data can be in any shape. Use the dataKey prop to map it to the chart.

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

Chart Config

The chart config holds labels, icons, and color tokens. It is intentionally decoupled from chart data.

import { type ChartConfig } from "@/components/cubix/chart"

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

Examples

Bar Chart

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart data={chartData}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Line Chart

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart data={chartData}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Area Chart

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart data={chartData}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Pie Chart

Pie Chart - Donut with Text

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart data={chartData}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Radial Chart

Radial Chart - Grid

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart data={chartData}>
    <Bar dataKey="value" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

Tooltip Indicators

Use the indicator prop on ChartTooltipContent to switch between dot, line, and dashed styles.

<ChartTooltip content={<ChartTooltipContent />} />

dot

line

dashed

<ChartTooltip content={<ChartTooltipContent />} />

Theming

Charts have built-in support for theming. Define your colors as CSS variables (recommended) or use hex, hsl, or oklch values directly.

app/globals.css

@layer base {
  :root {
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
  }

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

Reference theme colors in your components using var(--color-KEY):

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

Tooltip

Use ChartTooltip and ChartTooltipContent to add a themed tooltip.

<ChartTooltip content={<ChartTooltipContent />} />

Use labelKey and nameKey to use a custom key for the tooltip label and name:

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

Legend

Use ChartLegend and ChartLegendContent to add a themed legend.

<ChartLegend content={<ChartLegendContent />} />

Accessibility

Turn on the accessibilityLayer prop on any Recharts chart to add keyboard access and screen reader support.

API Reference

ChartContainer

Wraps a Recharts ResponsiveContainer and provides the chart config through context.

Prop	Type	Default	Description
config	ChartConfig	-	Maps data keys to a label, icon, and color or theme. Decoupled from chart data.
children	ResponsiveContainer children	-	One Recharts chart, such as BarChart, LineChart, or PieChart.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

ChartTooltipContent

Prop	Type	Default	Description
indicator	"dot" \| "line" \| "dashed"	"dot"	Shape of the color indicator next to each tooltip row.
hideLabel	boolean	false	Hide the tooltip label.
hideIndicator	boolean	false	Hide the color indicator.
labelKey	string	-	The config or data key to use for the label.
nameKey	string	-	The config or data key to use for the name.

ChartLegendContent

Prop	Type	Default	Description
hideIcon	boolean	false	Hide the icon or color swatch for each legend item.
nameKey	string	-	The config or data key to use for the legend names.