Donut chart

To add the DonutChart component to your app:

1
2
import { DonutChart } from '@forge/react';

Props

Data

Data can be one of two formats, an array of arrays or an array of objects. Both examples below will produce the same donut chart:

1. Array of arrays

Each entry in the dataset is an array. These arrays require a minimum of three items to denote the values, labels and color grouping.

For this data format, the valueAccessor, labelAccessor and colorAccessor are number indices, identified by the position within each array.

1
2
const arrayData = [
  // in this example ['color', 'label', 'value']
  ['done', 'Done', 20],
  ['todo', 'To do', 10],
  ['inprogress', 'In progress', 5],
  ['blocked', 'Blocked', 5],
];

export const DonutChartWithArrayDataExample = () => {
  return <DonutChart
    data={arrayData}
    colorAccessor={0} // position 0 in item array
    labelAccessor={1} // position 1 in item array
    valueAccessor={2} // position 2 in item array
  />
};

2. Array of objects

Each entry in the dataset is an object. These objects require a minimum of three properties in the form of key-value pairs to denote the values, labels and color grouping.

For this data format, the valueAccessor, labelAccessor and colorAccessor are string indices, identified by the key of the key-value pairs.

1
2
const objectData = [
  {
    type: 'done', // color grouping
    label: 'Done', // label
    value: 20, // value
  },
  {
    type: 'todo',
    label: 'To do',
    value: 10,
  },
  {
    type: 'inprogress',
    label: 'In progress',
    value: 5,
  },
  {
    type: 'blocked',
    label: 'Blocked',
    value: 5,
  },
];

export const DonutChartWithObjectDataExample = () => {
  return <DonutChart
    data={objectData}
    colorAccessor="type" // key of color value in object item
    labelAccessor="label" // key of label value in object item
    valueAccessor="value" // key for the value in object item
  />
};