Donut (alpha)

ALPHA

Donut is currently in alpha. This means that the component, behavior and API are all subject to change. To use, you will need to import from @adobe/react-spectrum-charts/alpha.

import { Chart, ChartProps } from '@adobe/react-spectrum-charts';
import { Donut } from '@adobe/react-spectrum-charts/alpha';

Donut

The Donut component is used to display donut and pie charts. The holeRatio prop is used to control the size of the hole in the center of the chart. A holeRatio of 0 will give you a pie chart.

Data aggregation

Unlike many other chart types, Donut only draws a single mark (arc) for a given series. This means that if you pass in multiple data points for the same series, donut will aggregate them together, summing their metric values.

Legend vs. direct labels

A donut chart can display series labels directly next to each arc. This is the direct labels method. This method is great when there are fewer than 6 segments in your donut chart. If one of the segments of the pie chart is really thin (sliver), the direct label for that slice will be dropped.

It is also possible to label each series using a legend just like you would on any other chart type.

You should not use direct labels and a legend as the information is redundant.

The legend for a Donut can be displayed the traditional way, positioned next to the chart (left, right, top, or bottom). Donut also supports positioning the legend directly on the chart. For this, use position="direct" on the Legend. For other chart type, direct will be ignored and the legend will be positioned to the right instead.

Examples

Donut

<Chart data={data}>
    <Donut color="operatingSystem" metric="visitors" metricLabel="Visitors" />
    <Legend title="Operating system" />
</Chart>

Direct labels

<Chart data={data}>
    <Donut series="operatingSystem" metric="visitors" metricLabel="Visitors" hasDirectLabels />
</Chart>

Props

name	type	default	description
children	ChartTooltip | ChartPopover	–	Metric is required.
color	string	'series'	The key in the data that defines what color that arc of the donut will be. This is not a color value itself but rather the key in the data that will map to the colors scale. For example: A donut chart that has a different color for each operating system, `color` would be set to the name of the key in the data that defines which operating system it is (color="operatingSystem").
hasDirectLabels	boolean	false	Sets if direct labels should be added to each donut segment.
holeRatio	number	0.85	Ratio of the donut inner radius / donut outer radius. 0 is a piechart.
isBoolean	boolean	false	Determines if the metric value should be displayed as a percent.
name	string	–	Donut name. Useful for if you need to traverse the chart object to find this donut.
metric	string	'value'	The key in the data that is used for the length of the arc.
metricLabel	string	–	Label text below the summary value in the center of the donut chart.
startAngle	number	0	The start angle of the donut in radians.