Doughnut Chart

x-h-chart-doughnut draws a doughnut chart (a pie with a hole in the middle) from a single reactive configuration object. Charts inherit the active theme colors and adapt to light and dark mode automatically.

Usage

Give the chart a container with an explicit height (charts fill their parent). Provide the slices to draw, each with a label and a value. A doughnut reads the same as a Pie Chart. Use it when you prefer the lighter ring style or want to leave the center open. To compare discrete categories use a Bar Chart, and for trends over an ordered sequence use a Line Chart.

API Reference

Component attribute(s)

x-h-chart-doughnut

Attributes

Attribute	Type	Required	Description
data-font-size	xs sm base lg	false	Changes the size of all chart text, such as labels, axis ticks, and the legend. Defaults to xs.

Configuration

Key	Type	Default	Description
slices	{ label, value, color? }[]	required	The slices to draw. Only positive values are shown. For color values, see Colors.
series	{ data: number[] }[] + labels	required	Alternative to slices. Тhe first series' values become slices, named by labels.
cutout	number	0.6	Hole size as a fraction of the radius (clamped to 0.2-0.9).
legend	boolean	true	Show the color/label key.
tooltip	boolean	true	Show a tooltip on hover and emit interaction events.
dataLabels	boolean	true	Draw each slice's percentage on the ring (hidden for slices under 5%).
labelPosition	'inside' | 'outside'	'inside'	Place the percentage labels on the ring or just outside the edge.
valueFormat	(value) => string	locale number	Formats values in tooltips.
palette	string[]	color-1 to color-9	Chart colors cycled for slices without an explicit color. See Colors for more information.
tableLabels	{ segment?, value? }	English defaults	Column headers of the hidden data table read by screen readers.

Colors

A slice color (and the palette entries) is one of the chart colors color-1 to color-12. They paint with the theme's --chart-color-1 to --chart-color-12 variables (see Theme Customization). By default, they map to blue, red, green, orange, purple, teal, pink, indigo, yellow, gray, white and black. The standard color names (red, orange, yellow, green, teal, blue, indigo, purple, pink, gray, white and black) are deprecated. They still work but they will be removed in the next major version.

Accessibility

The chart is exposed to assistive technologies as a figure with a visually-hidden data table of its segments and values, so screen-reader users get the underlying numbers (the visual ring and legend are marked decorative). It defaults to the accessible name "Doughnut chart". Set an aria-label attribute on the element to give it a more meaningful name.

Events

When tooltip is enabled, hovering and clicking slices emit bubbling CustomEvents on the chart element. See the events reference for the shared detail shape.

Data Slots

Slot	Element
chart	x-h-chart-doughnut
chart-svg	The chart drawing
chart-pie	A slice
chart-label	A value label
chart-legend	The legend
chart-legend-swatch	A legend color swatch
chart-tooltip	The hover tooltip
chart-table	The data table for assistive technologies
chart-empty	The message shown when there is no data

Examples

Basic

<div
  class="aspect-square h-full"
  style="max-height: 20rem"
  x-h-chart-doughnut="{
    slices: [
      { label: 'Direct', value: 4120 },
      { label: 'Referral', value: 2580 },
      { label: 'Social', value: 2060 },
      { label: 'Other', value: 1540 }
    ]
  }"
></div>

Thinner ring

<div
  class="aspect-square h-full"
  style="max-height: 20rem"
  x-h-chart-doughnut="{
    cutout: 0.8,
    slices: [
      { label: 'Direct', value: 40 },
      { label: 'Referral', value: 25 },
      { label: 'Social', value: 20 },
      { label: 'Other', value: 15 }
    ]
  }"
></div>