Documentation

javascript

react

React

Bullet Chart

Visualize values with an error range.

Example of the Bullet Chart

Basic Implementation

To render a Bullet Chart, import the BulletChart component.

The following implementation will generate the compass you can see in the image above:

import { BulletChart } from '@meistercharts/meistercharts-react'

export function MyChart() {
  const config = {
    categories: [
      { current: 15, barStart: 10, barEnd: 20, label: 'Monday' },
      { current: 30, barStart: 27, barEnd: 45, label: 'Tuesday' },
      { current: 5, barStart: 0, barEnd: 12, label: 'Wednesday' },
      { current: 43, barStart: 17, barEnd: 62, label: 'Thursday' },
      { current: 18, barStart: 10, barEnd: 30, label: 'Friday' }
    ]
  }

  return <BulletChart configuration={config} />
}
For improved performance you should initialize the chart configuration inside a useMemo hook.

Chart Configuration

The data as well as the compass style is configurable via the configuration prop. It accepts a BulletChartConfiguration object.

On this page