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.
A visual representation of data using rectangular bars of varying heights 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 2npm install --save @forge/react@latest
To add the StackBarChart
component to your app:
1 2import { StackBarChart } from '@forge/react';
Name | Type | Required | Description |
---|---|---|---|
data | unknown[] | Yes | Data can be one of two formats:
|
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 can be one of two formats, an array of arrays or an array of objects. Both examples below will produce the same stack bar chart:
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 2const arrayData = [ // in this example ['x value', 'y value', 'color value'] ['Apple', 4, 'Dog'], ['Apple', 5, 'Cat'], ['Apple', 11, 'Horse'], ['Apple', 15, 'Elephant'], ['Banana', 5, 'Dog'], ['Banana', 10, 'Cat'], ['Banana', 14, 'Horse'], ['Banana', 10, 'Elephant'], ['Kumquat', 1, 'Dog'], ['Kumquat', 14, 'Cat'], ['Kumquat', 25, 'Horse'], ['Kumquat', 10, 'Elephant'], ['Dragonfruit', 5, 'Dog'], ['Dragonfruit', 2, 'Cat'], ['Dragonfruit', 5, 'Horse'], ['Dragonfruit', 8, 'Elephant'], ] export const StackBarChartWithArrayDataExample = () => { return <StackBarChart data={arrayData} xAccessor={0} // position 0 in item array yAccessor={1} // position 1 in item array colorAccessor={2} // position 2 in item array />; };
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 2const objectData = [ { xAxis: 'Apple', // x value value: 4, // y value animal: 'Dog', // color value }, { xAxis: 'Apple', value: 5, animal: 'Cat', }, { xAxis: 'Apple', value: 11, animal: 'Horse', }, { xAxis: 'Apple', value: 15, animal: 'Elephant', }, { xAxis: 'Banana', value: 5, animal: 'Dog', }, { xAxis: 'Banana', value: 10, animal: 'Cat', }, { xAxis: 'Banana', value: 14, animal: 'Horse', }, { xAxis: 'Banana', value: 10, animal: 'Elephant', }, { xAxis: 'Kumquat', value: 1, animal: 'Dog', }, { xAxis: 'Kumquat', value: 14, animal: 'Cat', }, { xAxis: 'Kumquat', value: 25, animal: 'Horse', }, { xAxis: 'Kumquat', value: 10, animal: 'Elephant', }, { xAxis: 'Dragonfruit', value: 5, animal: 'Dog', }, { xAxis: 'Dragonfruit', value: 2, animal: 'Cat', }, { xAxis: 'Dragonfruit', value: 5, animal: 'Horse', }, { xAxis: 'Dragonfruit', value: 8, animal: 'Elephant', }, ]; export const StackBarChartWithObjectDataExample = () => { return <StackBarChart 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 />; };
For the EAP release, support for the StackBarChart
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 |
Rate this page: