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.

Single value (EAP)

A visualization representation of information with a single value as its metrics. The metric can be displayed with a increase/decrease indicator to display trends or changes over time.

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

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

Props

Name	Type	Required	Description
`data`	`number` \| `number[]`	Yes	Data can be one of two formats: A number - The value that is displayed, abbreviated at the thousand, millions, trillions and billions. An array of numbers: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.
`height`	`number`	No	The static height of the chart in pixels. Defaults to `120`.
`width`	`number`	No	The static width of the chart in pixels. If this is not specified, the width is responsive.
`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 metric value.
`showBorder`	`boolean`	No	Boolean to display the chart border. Defaults to `false`.

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 SingleValueChart 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