Pie Chart

data

Row[] | { categories, series }

Default: —

Row-based data array, or explicit categories/series (required).

x

keyof Row | ((row: Row) => ChartCategory)

Default: —

Category accessor, row-mode only.

series

ChartSeriesDef<Row> | ChartSeriesDef<Row>[]

Default: —

Series accessor(s), row-mode only.

title / description

ReactNode

Default: —

Chart heading text.

ariaLabel

string

Default: —

Accessible label for the chart.

dataFormat

ChartDataFormatOptions

Default: —

Value formatting (prefix/suffix/decimals) for labels/tooltips.

showLabels

ChartShowLabelsOptions

Default: —

Inline value-label visibility.

type

"line" | "area" | "bar" | "column" | "pie" | "donut" | "heatmap"

Default: —

Chart type (required).

background

string

Default: —

Chart background color.

unstyled

boolean

Default: false

Drop the built-in <figure> card frame (border / padding / radius / surface) — for a chart nested in a Card or a sparkline slot.

palette

{ colors?; colorShade?; roles? }

Default: —

Series color palette overrides.

line / bar / column / pieStyle / pie / heatmap

type-specific options

Default: —

Per-type rendering options. pie: { center?: false, renderCenter?: ({total, formatted}) => ReactNode } for the donut hole. heatmap: { color, minOpacity, maxOpacity, domain, cellGap, cellRadius, showValues, emptyColor }.

height

number

Default: 320

Chart height in pixels.

padding

{ top?; right?; bottom?; left?: number }

Default: —

Plot area padding.

axis / axisX / axisY

ChartAxisOptions

Default: —

Axis visibility + ticks. axisX/axisY take { show?, hide?, tickCount? } — `{ hide: true }` is an alias for `{ show: false }` (an explicit `show` wins). A custom `padding` on a labelled bar/column axis is floored so labels don't vanish.

grid

ChartGridOptions

Default: —

Gridline configuration.

legend

boolean | ChartLegendOptions

Default: true for multi-series

Legend visibility/position.

tooltip

boolean | ChartTooltipOptions

Default: true

Hover/focus tooltip visibility and formatting.

zoom

false | { mode?: "x" | "xy"; wheel?; pan? }

Default: —

Enables zoom/pan on axis charts.

export

false | { formats?: ("svg" | "png")[]; filename? }

Default: —

Enables an export action (SVG/PNG).

fullscreen

false | { enabled?: boolean }

Default: —

Enables a fullscreen toggle action.

filters

false | ChartFiltersOptions<Row>

Default: —

Enables interactive data filters.

isLoading

boolean

Default: —

Shows a loading state instead of the chart.

error

ReactNode

Default: —

Shows an error state instead of the chart.

empty

ReactNode

Default: —

Shown when data resolves to nothing plottable.

onPointClick

(event: ChartPointEvent<Row>) => void

Default: —

Called when a data point is clicked or activated via keyboard.

onCellClick

(event: ChartHeatmapCellEvent<Row>) => void

Default: —

type="heatmap" — a cell was clicked or keyboard-activated.

onLegendChange

(hiddenSeriesIds: string[]) => void

Default: —

Called when series visibility toggles via the legend.

onSelectionChange

(selection: ChartSelection) => void

Default: —

Called when a zoom/brush selection changes.

className / classNames / style

string / ChartClassNames / CSSProperties

Default: —

Styling overrides (classNames covers base/header/title/description/actions/stage/svg/legend/filters).