Bullet

@nivo/bulletsvgisomorphic

Bullet chart supporting multiple ranges/measures/markers.

You can fully customize this chart using custom components via rangeComponent, measureComponent and markerComponent properties.

The responsive alternative of this component is ResponsiveBullet.

Actions Logs
Start interacting with the chart to log actions
Base
object[]required
Chart data.
numberrequired
Chart width.
numberrequired
Chart height.
stringoptionaldefault:'horizontal'
How to display items.
booleanoptionaldefault:false
   Reverse chart.
objectoptional
px
px
px
px
Chart margin.
numberoptionaldefault:30
px
define spacing between items.
numberoptionaldefault:0.4
define size of measure related to item size, expressed as a ratio.
numberoptionaldefault:0.6
define size of markers related to item size, expressed as a ratio.
Style
Functionoptional
Custom component for ranges.
string | Function | string[]optionaldefault:'seq:cool'
Select...
Ranges colors
Functionoptional
Custom component for measures.
string | Function | string[]optionaldefault:'seq:red_purple'
Select...
Measures colors.
Functionoptional
Custom component for markers.
string | Function| string[]optionaldefault:'seq:red_purple'
Select...
Markers colors.
Axes
stringoptionaldefault:'after'
Where to put axis.
Title
stringoptionaldefault:'before'
Where to put title.
stringoptionaldefault:'middle'
start
title alignment.
numberoptional
px
title x offset from bullet edge.
numberoptional
px
title y offset from bullet edge.
numberoptionaldefault:0
°
title rotation.
Interactivity
(range, event) => voidoptional
onClick handler for ranges.
(measure, event) => voidoptional
onClick handler for measures.
(marker, event) => voidoptional
onClick handler for markers.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
numberoptionaldefault:90
Motion stiffness.
numberoptionaldefault:15
Motion damping.