Chart config

Updated October 3, 2026

Every chart takes data, an array of rows, and config, which names the keys to draw and how each one looks. The shape follows shadcn/ui charts: the same rows, and a config keyed by data key, with a dither pattern in place of a color.

Data

Area, bar, line and radar charts take one row per x position (a radar's spokes). xKey names the field that holds its label, and each config key names a numeric field to plot, drawn in config order:

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
  mobile: { label: "Mobile", pattern: "stripes" },
} satisfies ChartConfig

<BarChart
  data={chartData}
  config={chartConfig}
  xKey="month"
  label="Visitors by month"
/>

Pie and radial charts take one row per slice or ring. nameKey names the field that holds its name and dataKey the field with its value. The config has an entry per slice name, plus one for dataKey that labels the value:

const chartData = [
  { browser: "chrome", visitors: 275 },
  { browser: "safari", visitors: 200 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome" },
  safari: { label: "Safari", pattern: "dots" },
} satisfies ChartConfig<SlicePattern>

<PieChart
  data={chartData}
  config={chartConfig}
  nameKey="browser"
  dataKey="visitors"
  label="Visitors by browser"
/>

Config entry

Chart config entry
Prop	Type	Default	Description
labelrequired	Type string	Default –	Its name in the legend, the tooltip and the table twin.
pattern	Type Pattern	Default –	How it tells itself apart without color: a series pattern on area, bar, line and radar charts, a slice pattern on pie and radial charts. Unset, series alternate solid and stripes, and slices and rings take the slice patterns in order.
icon	Type ReactNode	Default –	An icon element shown in place of its legend swatch and tooltip indicator.

Patterns

Series patterns, for area, bar, line and radar charts. Stripes carve diagonal paper stripes out of an area or a bar, dash a line, and hatch a radar's fill and dash its outline.

"solid"
"stripes"

Slice patterns, for pie and radial charts, in the order slices and rings take them when unset. Solid comes first, so a lone slice draws solid.

"solid"
"checker"
"stripes"
"stripes-reverse"
"dots"

Icons

An entry's icon, any React element, takes the place of its legend swatch and its tooltip indicator. View Code in the gallery adds the icon import for you.

import { MonitorIcon, DeviceMobileIcon } from "@phosphor-icons/react"

const chartConfig = {
  desktop: { label: "Desktop", icon: <MonitorIcon /> },
  mobile: { label: "Mobile", icon: <DeviceMobileIcon /> },
} satisfies ChartConfig

See them on the area chart examples and the radar chart examples.