Compact KPI chart with value, target, and qualitative ranges
BulletChart is a compact KPI chart that displays an actual value against a target with qualitative ranges as background bands. The required props are value and ranges . Labels are automatically displayed at range boundaries, the target position, and the bar value.
BulletChart expects ranges as an array of objects with value and color properties. Ranges are rendered back-to-front (largest first), so smaller ranges overlay larger ones.
Use label prop to display a label next to the chart:
Set orientation="vertical" to render the chart vertically. Note that you need to set a fixed height on the component when using vertical orientation:
By default, the bar color is white. Use barColor prop to customize the color of the actual value bar. Use targetColor to change the target marker color:
Use size prop to control the height of the chart track area. The barSize prop controls the height of the actual value bar independently:
Use valueFormatter prop to format values displayed in labels and tooltips. Set withTooltip to also show a tooltip on hover:
The target prop is optional. If not provided, the target marker is not rendered: