Bullet

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.

Start interacting with the chart to log actions

Base

dataobject[]required

Chart data.

widthnumberrequired

Chart width.

heightnumberrequired

Chart height.

layoutstringoptionaldefault:'horizontal'

horizontalvertical

How to display items.

reversebooleanoptionaldefault:false

Reverse chart.

marginobjectoptional

top

right

bottom

left

Chart margin.

spacingnumberoptionaldefault:30

define spacing between items.

measureSizenumberoptionaldefault:0.4

define size of measure related to item size, expressed as a ratio.

markerSizenumberoptionaldefault:0.6

define size of markers related to item size, expressed as a ratio.

Style

themeoptional

Define style for common elements such as labels, axes…

rangeComponentFunctionoptional

Custom component for ranges.

rangeColorsstring | Function | string[]optionaldefault:'seq:cool'

Select...

Ranges colors

measureComponentFunctionoptional

Custom component for measures.

measureColorsstring | Function | string[]optionaldefault:'seq:red_purple'

Select...

Measures colors.

markerComponentFunctionoptional

Custom component for markers.

markerColorsstring | Function| string[]optionaldefault:'seq:red_purple'

Select...

Markers colors.

Axes

axisPositionstringoptionaldefault:'after'

beforeafter

Where to put axis.

Title

titlePositionstringoptionaldefault:'before'

beforeafter

Where to put title.

titleAlignstringoptionaldefault:'middle'

start

title alignment.

titleOffsetXnumberoptional

title x offset from bullet edge.

titleOffsetYnumberoptional

title y offset from bullet edge.

titleRotationnumberoptionaldefault:0

title rotation.

Interactivity

onRangeClick(range, event) => voidoptional

onClick handler for ranges.

onMeasureClick(measure, event) => voidoptional

onClick handler for measures.

onMarkerClick(marker, event) => voidoptional

onClick handler for markers.

Motion

animatebooleanoptionaldefault:true

Enable/disable transitions.

motionConfigstring | objectoptionaldefault:'default'

presetcustom

default

Motion config for react-spring, either a preset or a custom configuration.