Pie Chart

A pie chart shows data as proportional segments of a disc. Pie charts can be segmented by either multiple measures or an attribute.



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



import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { PieChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

const style = { height: 300 };

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


measurestrueIMeasure[]An array of measure definitions
viewByfalseIAttributeThe attribute definition
filtersfalseIFilter[]An array of filter definitions
sortByfalseISortItem[]An array of sort definitions
configfalseIChartConfigThe chart configuration object
backendfalseIAnalyticalBackendThe object with the configuration related to communication with the backend and access to analytical workspaces
workspacefalsestringThe workspace ID
localefalsestringThe localization of the chart. Defaults to en-US.
drillableItemsfalseIDrillableItem[]An array of points and attribute values to be drillable
ErrorComponentfalseComponentA component to be rendered if this component is in error state
LoadingComponentfalseComponentA component to be rendered if this component is in loading state
onErrorfalseFunctionA callback when the component updates its error state
onExportReadyfalseFunctionA callback when the component is ready for exporting its data
onLoadingChangedfalseFunctionA callback when the component updates its loading state
onDrillfalseFunctionA callback when a drill is triggered on the component

The following example shows the supported config structure with sample values. For the descriptions of the individual options, see ChartConfig.

    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
    colorPalette: [{
        guid: "01",
        fill: {
            r: 195,
            g: 49,
            b: 73
    }, {
        guid: "02",
        fill: {
            r: 168,
            g: 194,
            b: 86
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === "m1_localIdentifier")
        color: {
            type: "guid",
            value: "02"
    legend: {
        enabled: true,
        position: "top",
    dataLabels: {
        visible: "auto"
    separators: {
        thousand: ",",
        decimal: "."