UI Kit data visualization components are now available as part of Forge’s Early Access Program (EAP). To start using this EAP, sign up using the Forge EAP form.

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.

Bar chart (EAP)

A visual representation of data using rectangular bars of varying heights to compare different categories or values.

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

Props

Examples

Usage

To add the BarChart component to your app:

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

Props

Name	Type	Required	Description
`data`	`unknown[]`	Yes	Data can be one of two formats: An array of arrays. An array of objects.
`height`	`number`	No	The static height of the chart in pixels. Defaults to `400`.
`width`	`number`	No	The static width of the chart in pixels. If this is not specified, the width is responsive.
`xAccessor`	`number` \| `string`	Yes	Accessor to define the x-axis values. This can be a numerical or string index. For more information on all accessors, see Data.
`yAccessor`	`number` \| `string`	Yes	Accessor to define the y-axis values.
`colorAccessor`	`number` \| `string`	No	Accessor to define the color grouping.
`title`	`string`	No	A string value that represents the title of the chart.
`subtitle`	`string`	No	A string value that represents the subtitle of the chart. This appears below the title.
`showBorder`	`boolean`	No	Boolean to display the chart border. Defaults to `false`.
`colors`	`ChartColorTokens[]`	No	An array of chart color tokens. This is utilized to render each bar 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 bar chart:

Example image of a rendered group bar

1. Array of arrays

Each entry in the dataset is an array. These arrays require a minimum of two items to denote the x and y coordinates. Optionally, an extra item may be included to indicate color grouping.

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

1
2
const arrayData = [
  // in this example ['x value', 'y value', 'color value']
  ['Apple', 5, 'Dog'],
  ['Apple', 10, 'Cat'],
  ['Apple', 25, 'Horse'],
  ['Apple', 15, 'Elephant'],
  ['Banana', 13, 'Dog'],
  ['Banana', 5, 'Cat'],
  ['Banana', 15, 'Horse'],
  ['Banana', 22, 'Elephant'],
  ['Kumquat', 2, 'Dog'],
  ['Kumquat', 15, 'Cat'],
  ['Kumquat', 4, 'Horse'],
  ['Kumquat', 18, 'Elephant'],
  ['Dragonfruit', 10, 'Dog'],
  ['Dragonfruit', 30, 'Cat'],
  ['Dragonfruit', 5, 'Horse'],
  ['Dragonfruit', 8, 'Elephant'],
];

export const BarChartWithArrayDataExample = () => {
  return <BarChart 
    data={arrayData} 
    xAccessor={0} // position 0 in item array
    yAccessor={1} // position 1 in item array
    colorAccessor={2} // position 2 in item array
  />;
};

2. Array of objects

Each entry in the dataset is an object. These objects require a minimum of two properties in the form of key-value pairs to denote the x and y coordinates. Optionally, an extra property may be included to indicate color grouping.

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

1
2
const objectData = [
  {
    xAxis: 'Apple', // x value
    value: 5, // y value
    animal: 'Dog', // color value
  },
  {
    xAxis: 'Apple',
    value: 1,
    animal: 'Cat',
  },
  {
    xAxis: 'Apple',
    value: 22,
    animal: 'Horse',
  },
  {
    xAxis: 'Apple',
    value: 6,
    animal: 'Elephant',
  },
  {
    xAxis: 'Banana',
    value: 13,
    animal: 'Dog',
  },
  {
    xAxis: 'Banana',
    value: 3,
    animal: 'Cat',
  },
  {
    xAxis: 'Banana',
    value: 10,
    animal: 'Horse',
  },
  {
    xAxis: 'Banana',
    value: 3,
    animal: 'Elephant',
  },
  {
    xAxis: 'Kumquat',
    value: 1,
    animal: 'Dog',
  },
  {
    xAxis: 'Kumquat',
    value: 5,
    animal: 'Cat',
  },
  {
    xAxis: 'Kumquat',
    value: 4,
    animal: 'Horse',
  },
  {
    xAxis: 'Kumquat',
    value: 12,
    animal: 'Elephant',
  },
  {
    xAxis: 'Dragonfruit',
    value: 6,
    animal: 'Dog',
  },
  {
    xAxis: 'Dragonfruit',
    value: 13,
    animal: 'Cat',
  },
  {
    xAxis: 'Dragonfruit',
    value: 33,
    animal: 'Horse',
  },
  {
    xAxis: 'Dragonfruit',
    value: 1,
    animal: 'Elephant',
  },
];
export const BarChartWithObjectDataExample = () => {
  return <BarChart 
    data={objectData} 
    xAccessor={"xAxis"} // key of x value in object item
    yAccessor={"value"} // key of y value in object item
    colorAccessor={"animal"} // key of color value in object item
  />;
};

Example app

Data visualization app with UI Kit

This app uses the Jira project page module to display a variety of interactive charts including single value, bar, line and pie charts, providing visual insights into data from your Jira board.

Explore example app

Supported Modules

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

Product	Module
Confluence	All modules
Jira	All modules
Bitbucket	Not supported
Compass	Not supported
Jira Service Management	Not supported