Charts

PieChart

A pie or donut chart with per-slice hover emphasis and a legend that redistributes percentages when a slice is hidden — a standalone chart with no x/y scales, unlike Line/Bar/AreaChart.

PieChartInteractivePieChart

Preview

Usage

tsx

import { InteractivePieChart } from "@vesture/react";

const data = [
  { key: "chrome", label: "Chrome", value: 62 },
  { key: "safari", label: "Safari", value: 20 },
  { key: "firefox", label: "Firefox", value: 10 },
  { key: "edge", label: "Edge", value: 8 },
];

<div style={{ height: 320 }}>
  <InteractivePieChart data={data} innerRadius={0.6} />
</div>

Behavior

innerRadius is a fraction of the outer radius (0 = full pie, e.g. 0.6 = a donut with a visible center hole), not a pixel value.
Slices with a value of 0 or negative are silently excluded — a zero-width arc has nothing to render.
In-slice percentage labels only render on slices with enough angular width to plausibly fit a label; narrow slices suppress their label and stay identifiable via the legend instead. showLabels={false} turns off in-slice labels entirely.
InteractivePieChart hovers per-slice (onMouseEnter/Leave on each arc, not a continuous overlay) and nudges the hovered slice outward along its angle bisector.
Legend toggle is deliberately different from Line/Bar/AreaChart: hiding a slice recomputes the remaining slices' percentages so they still sum to 100, rather than just removing that arc and leaving the others' percentages stale.

Props

PieChartDataPoint

Prop	Type	Default	Description
key	string	—	Required. Stable identity for legend/color assignment.
label	string	—	Required. Shown in the legend and tooltip.
value	number	—	Required. Zero or negative values are excluded from rendering.
color	string	—	Overrides the auto-assigned series1-8 token color for just this slice.

PieChart

Prop	Type	Default	Description
data	PieChartDataPoint[]	—	Required.
width / height	number	—	Required.
innerRadius	number	0	Fraction of outerRadius carved out as a center hole — e.g. 0.6 for a donut.
showLabels	boolean	true	Turns off in-slice percentage labels even on slices wide enough to fit one.

InteractivePieChart

Prop	Type	Default	Description
data / innerRadius / showLabels	same as PieChart	—
height	number	320	Fixed height — width auto-tracks the parent container.