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.

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

To add the HorizontalStackBarChart component to your app:

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

Props

NameTypeRequiredDescription
dataunknown[]YesData can be one of two formats:
  1. An array of arrays.
  2. An 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.
xAccessornumber | stringYesAccessor to define the x-axis values. This can be a numerical or string index. For more information on all accessors, see Data.
yAccessornumber | stringYesAccessor to define the y-axis values.
colorAccessornumber | stringYesAccessor to define the color grouping.
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.
colorsChartColorTokens[]NoAn 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

Supported Modules

For the EAP release, support for the HorizontalStackBarChart 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: