UI Kit components
UI Kit hooks
Forge bridge APIs
Jira bridge APIs
Upgrade UI Kit versions
Previous versions

Forge’s EAP offers experimental features to selected users for testing and feedback purposes. These features are unsupported and not recommended for use in production environments. They are also subject to change without notice.

For more details , see Forge EAP, Preview, and GA.

Pie chart (EAP)

A visual representation of data proportions in a circular format.

You must be on @forge/react major version 10.3.0 or higher to use the latest version of UI Kit components. To install:

1
2
npm install --save @forge/react@latest

To add the PieChart component to your app:

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

Props

NameTypeRequiredDescription
dataunknown[]YesData can be one of two formats:
  1. Array of arrays.
  2. Array of objects.
heightnumberNoThe static height of the chart in pixels. Defaults to 400.
widthnumberNoThe static width of the chart in pixels. If this is not specified, the width is responsive.
colorAccessornumber | stringYesAccessor to define the color grouping. This can be a numerical or string index. For more information on all accessors, see Data.
valueAccessornumber | stringYesAccessor to define the angle of arcs in a pie.
labelAccessornumber | stringYesAccessor to define the labels.
titlestringNoA string value that represents the title of the chart.
subtitlestringNoA string value that represents the subtitle of the chart. This appears below the title.
showBorderbooleanNoBoolean to display the chart border. Defaults to false.
showMarkLabelsbooleanNoBoolean to display labels on top of each slice. Defaults to false.
isDonutbooleanNoBoolean to render the pie as the donut variation. Defaults to false.
colorsChartColorTokens[]NoAn array of chart color tokens. This is utilized to render each slice with the specified colors, based on the color grouping given by colorAccessor.

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:

Example image of a rendered 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']
  ['lime', 'Lime', 20],
  ['orange', 'Orange', 10],
  ['grape_fruit', 'Grapefruit', 5],
  ['mango', 'Mango', 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: 'lime', // color grouping
    label: 'Lime', // label
    value: 20, // value
  },
  {
    type: 'orange',
    label: 'Orange',
    value: 10,
  },
  {
    type: 'grape_fruit',
    label: 'Grapefruit',
    value: 5,
  },
  {
    type: 'mango',
    label: 'Mango',
    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
  />
};

Example app

Supported Modules

For the EAP release, support for the PieChart component has been enabled in the following modules:

ProductModule
Confluence All modules
Jira All modules
Bitbucket Not supported
Compass Not supported
Jira Service Management Not supported

Rate this page: