Pie Chart

PieChart renders pie or donut charts via Recharts. It is the pie primitive used inside Chart — use it directly when you need an inline legend, percentage labels, or click handlers.

  • Each data point is { label, value, color?, unit? } — color is optional and falls back to the built-in 6-color palette.
  • variant="donut" carves out a hollow center so you can place a summary metric or label inside.
  • Slices pop out slightly on hover for emphasis.
  • showLegend renders an inline Legend below the chart so users can match colors without hovering.
  • showLabels renders percentage labels directly inside each slice.
  • showPercentageInTooltip appends the percentage to the value in the hover tooltip.
  • onSliceClick exposes the native mouse event for stop-propagation control.

Import

import { PieChart } from "h2o-library/charts";

Usage

Pie

Cases by specialty

Cardiology
Dermatology
Neurology
Urology
<PieChart
  variant="pie"
  showLegend={true}
  data={[
    { label: "Cardiology", value: 400, color: "#041957" },
    { label: "Dermatology", value: 300, color: "#3767F6" },
    { label: "Neurology", value: 250, color: "#9FB7FF" },
    { label: "Urology", value: 200, color: "#D6E0FF" },
  ]}
/>;

Donut

variant="donut" hollows out the center — useful when you want to overlay a total or summary metric.

Cases by specialty

Cardiology
Dermatology
Neurology
Urology
<PieChart variant="donut" data={data} showLegend={true} />;

Default Color Palette

Omit color on any data point to use the built-in 6-color palette.

<PieChart
  data={[
    { label: "Organic", value: 55 },
    { label: "Direct", value: 25 },
    { label: "Social", value: 20 },
  ]}
/>;

Percentage Labels & Tooltip

showLabels writes the percentage inside each slice; showPercentageInTooltip appends it after the raw value in the tooltip.

<PieChart
  data={data}
  variant="donut"
  showLabels={true}
  showPercentageInTooltip={true}
/>;

Slice Click

<PieChart
  data={data}
  onSliceClick={(dataPoint, index, e) => {
    e.stopPropagation();
    console.log(dataPoint.label, dataPoint.value);
  }}
/>;

Playground

Loading playground…

Props

PieChart

PropTypeDefaultDescription
data*PieChartDataPoint[]—Array of data points. Each has a label and value; color is optional.
variant"pie" | "donut""pie"Pie renders a full circle; donut has a hollow center.
heightnumber400Height of the chart area in pixels.
showLegendbooleanfalseRenders an inline Legend component below the chart.
showLabelsbooleanfalseRenders percentage labels inside each slice.
showPercentageInTooltipbooleanfalseAppends the percentage to the value shown in the hover tooltip.
classNamestringundefinedAdditional CSS class for the container div.
onSliceClick(dataPoint, index, event) => voidundefinedFired when a slice is clicked. Receives the data point, its index, and the native mouse event.

* Required

PieChartDataPoint

PropTypeDefaultDescription
label*string—Slice label shown in the legend and tooltip.
value*number—Numeric value that determines slice size.
colorstringpaletteFill color (hex, hsl, or any CSS color). Falls back to the built-in 6-color palette when omitted.
unitstringundefinedUnit suffix appended to the value in the tooltip.

* Required

Design Guidelines

  • Use pie/donut charts only for proportional composition with ≤ 5 categories.
  • Use donut when you want to place a summary metric or central label inside.
  • Always pair with a legend (showLegend or Legend) so colors are identifiable without hovering.
  • Avoid pie charts when comparing similarly-sized values — a BarChart is more readable.

Accessibility

  • Tooltips appear on hover; no keyboard equivalent by default.
  • showLabels writes percentages directly into the chart, providing at-a-glance readability without hover.
  • Provide a data table alternative for screen reader users when chart data is critical.