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.

Horizontal stack bar chart (EAP)

A visual representation of data using rectangular bars of varying lengths to demonstrate comparisons between categories of data.

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 HorizontalStackBarChart component to your app:

1
2
import { HorizontalStackBarChart } 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`	Yes	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 horizontal stack bar chart:

Example image of a rendered horizontal stack bar chart

1. Array of arrays

Each entry in the dataset is an array. These arrays require three items to denote the x and y coordinates and 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', 9, 'Dog'],
  ['Apple', 3, 'Cat'],
  ['Apple', 2, 'Horse'],
  ['Apple', 3, 'Elephant'],
  ['Banana', 3, 'Dog'],
  ['Banana', 4, 'Cat'],
  ['Banana', 2, 'Horse'],
  ['Banana', 4, 'Elephant'],
  ['Kumquat', 4, 'Dog'],
  ['Kumquat', 6, 'Cat'],
  ['Kumquat', 7, 'Horse'],
  ['Kumquat', 3, 'Elephant'],
  ['Dragonfruit', 6, 'Dog'],
  ['Dragonfruit', 3, 'Cat'],
  ['Dragonfruit', 2, 'Horse'],
  ['Dragonfruit', 4, 'Elephant'],
];

export const HorizontalStackBarChartWithArrayDataExample = () => {
  return <HorizontalStackBarChart 
    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 three properties in the form of key-value pairs to denote the x and y coordinates and 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: 9, // y value
    animal: 'Dog', // color value
  },
  {
    xAxis: 'Apple',
    value: 3,
    animal: 'Cat',
  },
  {
    xAxis: 'Apple',
    value: 2,
    animal: 'Horse',
  },
  {
    xAxis: 'Apple',
    value: 3,
    animal: 'Elephant',
  },
  {
    xAxis: 'Banana',
    value: 3,
    animal: 'Dog',
  },
  {
    xAxis: 'Banana',
    value: 4,
    animal: 'Cat',
  },
  {
    xAxis: 'Banana',
    value: 2,
    animal: 'Horse',
  },
  {
    xAxis: 'Banana',
    value: 4,
    animal: 'Elephant',
  },
  {
    xAxis: 'Kumquat',
    value: 4,
    animal: 'Dog',
  },
  {
    xAxis: 'Kumquat',
    value: 6,
    animal: 'Cat',
  },
  {
    xAxis: 'Kumquat',
    value: 7,
    animal: 'Horse',
  },
  {
    xAxis: 'Kumquat',
    value: 3,
    animal: 'Elephant',
  },
  {
    xAxis: 'Dragonfruit',
    value: 6,
    animal: 'Dog',
  },
  {
    xAxis: 'Dragonfruit',
    value: 3,
    animal: 'Cat',
  },
  {
    xAxis: 'Dragonfruit',
    value: 2,
    animal: 'Horse',
  },
  {
    xAxis: 'Dragonfruit',
    value: 4,
    animal: 'Elephant',
  },
];
export const HorizontalStackBarChartWithObjectDataExample = () => {
  return <HorizontalStackBarChart 
    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 HorizontalStackBarChart 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