React ChartsBullet Series

react logo

A Bullet Series presents a single data point within a predefined range, commonly used to illustrate the relationship of a key value to a target or comparative values. It employs a horizontal or vertical bar and employs various visual cues for clarity.

Simple Bullet

To create a Bullet Series, use the bullet series type.

series: [
    {
        type: 'bullet',
        valueKey: 'income',
        valueName: 'Actual income',
        targetKey: 'objective',
        targetName: 'Target income',
        scale: { max: 15000 },
        colorRanges: [
            { color: '#FFB6C1' /* Light Pink */, stop: 8000 },
            { color: '#FFFACD' /* Light Yellow */, stop: 13000 },
            { color: '#B6FBB6' /* Light Green */ },
        ],
    },
],

In this configuration:

  • valueKey defines the numeric value represented by the bar.
  • targetKey defines the optional numeric value represented by the target line.
  • valueName and targetName configure display names, reflected in the Tooltip.
  • scale.max defines the maximum value of the graph. This an alias for the Axes Domain.
  • colorRange define the quantitantive categories of the scale. The optional stop key defaults to scale.max.

Bullet Series only works with positive numbers for both the value and target.

Horizontal Bullet

To create a Horizontal bullet Series, set direction: 'horizontal'.

series: [
    {
        type: 'bar',
        direction: 'horizontal',
        valueKey: 'income',
        // ...
    },
],

API Reference