React ChartsBullet Series

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.

Horizontal Bullet

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

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

API Reference