Pie chart

To add the PieChart component to your app:

1
2
import { PieChart } 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 pie 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 PieChartWithArrayDataExample = () => {
  return <PieChart
    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 PieChartWithObjectDataExample = () => {
  return <PieChart
    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
  />
};