Bullet chart

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.

minValuenumber | 'auto'optionaldefault:0

auto

Minimum value.

maxValuenumber | 'auto'optionaldefault:'auto'

auto

Maximum value.

widthnumberrequired

Chart width.

heightnumberrequired

Chart height.

marginobjectoptional

top

right

bottom

left

Chart margin.

layoutstringoptionaldefault:'horizontal'

horizontalvertical

How to display items.

reversebooleanoptionaldefault:false

Reverse chart.

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

themeThemeoptional

Define style for common elements such as labels, axes…

rangeBorderColorstring | object | Functionoptionaldefault:{"from":"color"}

inheritthemecustom

inherited property

color

modifiers

No modifier.

Method to compute range border color.

rangeBorderWidthnumberoptionaldefault:0

Width of range border.

rangeComponentFunctionoptional

Custom component for ranges.

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

Cool

Ranges colors

measureBorderColorstring | object | Functionoptionaldefault:{"from":"color"}

inheritthemecustom

inherited property

color

modifiers

No modifier.

Method to compute measure border color.

measureBorderWidthnumberoptionaldefault:0

Width of measure border.

measureComponentFunctionoptional

Custom component for measures.

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

Sequential: Red → Purple

Measures colors.

markerComponentFunctionoptional

Custom component for markers.

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

Sequential: Red → Purple

Markers colors.

Axes

axisPositionstringoptionaldefault:'after'

beforeafter

Where to put axis.

Title

titlePositionstringoptionaldefault:'before'

beforeafter

Where to put title.

titleAlignstringoptionaldefault:'middle'

start

title alignment.

titleOffsetXnumberoptionaldefault:0

title x offset from bullet edge.

titleOffsetYnumberoptionaldefault:0

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.