Donut chart

A donut chart shows data as proportional segments of a disc and has a hollowed out center. Donut charts can be segmented by either multiple measures or an attribute, and allow viewers to visualize component parts of a whole. For example, a donut chart can show the market share of each company.

Buckets

Prop	Required	Takes	What it does
`measures`	Yes	One measure or an array of measures	Sets the size of the slices. With more than one measure, each measure is a slice.
`viewBy`	No	One attribute	Draws one slice per attribute value. Works only with a single measure.
`filters`	No	Filters	Limits the data the donut chart shows.

Sorting

By default, the donut chart sorts the slices by value in descending order. DonutChart has a sortBy prop. For the slices to follow sortBy, also set enableChartSorting: true in config. Otherwise, the chart re-sorts them by value.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Option	What it changes
`colors`, `colorPalette`, `colorMapping`	Colors of the slices: one per `viewBy` value, or one per measure without `viewBy`.
`legend`	Whether the legend shows and where. `position` defaults to `"top"`. The legend appears only with `viewBy` or more than one measure.
`dataLabels`	`visible` shows or hides the labels. `style: "backplate"` adds a background behind them. `position` places them `"inside"` or `"outside"` the slices; the default, `"auto"`, puts all labels outside when the smallest slice is 5% or less of the total, and inside otherwise. `position` needs `enableDonutDataLabels`.
`enableDonutDataLabels`	Turns on `dataLabels.position`. Without it, labels sit inside the slices.
`enableChartSorting`	Keeps the slice order that `sortBy` sets. See Sorting.
`enableCompactSize`	Hides overlapping data labels in small containers, and all data labels in very small ones.
`chartFill`	`type` sets how slices are filled: `"solid"`, `"pattern"`, or `"outline"`.
`separators`	Thousands and decimal separators in the number format.

Limits

A donut chart can’t show negative values. If the data contains any, the chart shows an error and onError receives a NegativeValuesSdkError.
A donut chart renders up to 10,000 slices. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
viewBy works only with a single measure. With viewBy and more than one measure, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError.

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { DonutChart } from "@gooddata/sdk-ui-charts";

<DonutChart
    measures={<measures>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { DonutChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <DonutChart
        measures={[
            Md.$FranchiseFeesAdRoyalty,
            Md.$FranchiseFeesInitialFranchiseFee,
            Md.$FranchiseFeesOngoingRoyalty
        ]}
    />
</div>

Props

Prop	Type	Required	Description	Inherited from
`measures`	`AttributeMeasureOrPlaceholder` `\|` `AttributesMeasuresOrPlaceholders`	Yes	Specify one or more measures to segment the donut chart.	`IDonutChartBucketProps`
`backend`	`IAnalyticalBackend`	No	Analytical backend, from which the chart will obtain data to visualize If you do not specify instance of analytical backend using this prop, then you MUST have BackendProvider up in the component tree.	`IBucketChartProps`
`config`	`IChartConfig`	No	Configure chart’s behavior and appearance.	`ICommonChartProps`
`drillableItems`	`ExplicitDrill[]`	No	Configure drillability; e.g. which parts of the visualization can be interacted with.	`IVisualizationProps`
`ErrorComponent`	`ComponentType<IErrorProps>`	No	React component to display in the event when there is an error with either obtaining the data from backend or with the data itself.	`IVisualizationProps`
`execConfig`	`IExecutionConfig`	No	Execution configuration, will provide the execution with necessary config before initiating execution.	`ICommonChartProps`
`exportTitle`	`string`	No	Set title to use for exported files.	`IVisualizationProps`
`filters`	`NullableFiltersOrPlaceholders`	No	Specify filters to apply on the data to chart.	`IDonutChartBucketProps`
`height`	`number`	No	Set height of the chart (in pixels).	`ICommonChartProps`
`LoadingComponent`	`ComponentType<ILoadingProps>`	No	React component to display while loading data from the backend.	`IVisualizationProps`
`locale`	`string`	No	Set Locale for visualization localization.	`IVisualizationProps`
`onDataView`	`OnDataView`	No	(Alpha) Called when the visualization loads a DataView, i.e. it receives data from the backend.	`IVisualizationCallbacks`
`onDrill`	`OnFiredDrillEvent`	No	Called when user triggers a drill on a visualization.	`IVisualizationCallbacks`
`onError`	`OnError`	No	Called when an error occurs while loading data for the visualization.	`IVisualizationCallbacks`
`onExportReady`	`OnExportReady`	No	Called when the visualization is ready to be exported.	`IVisualizationCallbacks`
`onLegendReady`	`OnLegendReady`	No	Called when legend is rendered.	`IChartCallbacks`
`onLoadingChanged`	`OnLoadingChanged`	No	Called when loading status of the visualization changes - vis starts or stops loading	`IVisualizationCallbacks`
`placeholdersResolutionContext`	`any`	No	Resolution context for composed placeholders.	`IDonutChartBucketProps`
`sortBy`	`SortsOrPlaceholders`	No	Specify how to sort the data to chart.	`IDonutChartBucketProps`
`viewBy`	`AttributeOrPlaceholder`	No	Specify viewBy attribute that will be used to create the donut slices. There will be a slice for each value of the attribute.	`IDonutChartBucketProps`
`width`	`number`	No	Set width of the chart (in pixels).	`ICommonChartProps`
`workspace`	`string`	No	Identifier of analytical workspace, from which the chart will obtain data to visualize. If you do not specify workspace identifier, then you MUST have WorkspaceProvider up in the component tree.	`IBucketChartProps`