BoxPlot

@nivo/boxplot
svg

BoxPlot description.

Actions Logs
Start interacting with the chart to log actions
Base
string | (datum: RawDatum): numberoptionaldefault:'value'

Value accessor.

number | 'auto'optionaldefault:'auto'
auto

Minimum value.

number | 'auto'optionaldefault:'auto'
auto

Maximum value.

string | functionoptionaldefault:'group'

How to group box plots belonging to the same series

string[]optionaldefault:

Specify the groups available, if omitted, it will be inferred from the provided data.

string | functionoptionaldefault:

Used for sub-grouping.

string[]optionaldefault:

Specify the sub-groups available, if omitted, it will be inferred from the provided data.

[number, number, number, number, number]optionaldefault:[0.1, 0.25, 0.5, 0.75, 0.9]
value[0.1, 0.25, 0.5, 0.75, 0.9]

Quantiles

'horizontal' | 'vertical'optionaldefault:'vertical'

Chart layout.

numberoptionaldefault:0.1

Padding between each group or boxplot when there is a single group (ratio).

numberoptionaldefault:6
px

Padding between grouped boxplots.

numberrequired

Chart width.

numberrequired

Chart height.

objectoptional
px
px
px
px

Chart margin.

Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Nivo

Define chart's colors.

'group' | 'subGroup'optionaldefault:'subGroup'

How to assign individual colors, also impacts legends.

numberoptionaldefault:1

Opacity.

numberoptionaldefault:0
px

Interquartile Range box border radius.

numberoptionaldefault:0
px

Interquartile Range box border.

string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute the Interquartile Range box border color.

numberoptionaldefault:3
px

Median line width.

string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",2]]}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute the median color.

numberoptionaldefault:0
px

Whisker line width.

numberoptionaldefault:0

Whisker end size.

string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute the whiskers color.

object[]optional

Define patterns and gradients.

object[]optional

Define rules to apply patterns and gradients

Grid & Axes
booleanoptionaldefault:false
   

Enable/disable x grid.

(number | string)[]optional

Specify values to use for vertical grid lines.

booleanoptionaldefault:true
   

Enable/disable y grid.

(number | string)[]optional

Specify values to use for horizontal grid lines.

objectoptional

Top axis configuration.

objectoptional

Right axis configuration.

objectoptional

Bottom axis configuration.

objectoptional

Left axis configuration.

Customization
Array<string | Function>optionaldefault:['grid', 'axes', 'boxPlots', 'markers', 'legends', 'annotations']

Defines the order of layers and add custom layers.

React.FC<BoxPlotItemProps<RawDatum>>optional

Override the default box plot component.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

numberoptionaldefault:1

Opacity when active.

numberoptionaldefault:0.25

Opacity when inactive.

Functionoptional

Tooltip custom component

Legends
object[]optional

Optional chart's legends.

add legend
legend[0]: right, columnremove
stringoptional
right

Defines legend anchor relative to chart's viewport.

'column' | 'row'optional

Legend direction, must be one of 'column', 'row'.

booleanoptional
   

Justify symbol and label.

numberoptional
px

Legend block x translation.

numberoptional
px

Legend block y translation.

numberrequired
px

Legend item width.

numberrequired
px

Legend item height.

numberoptional
px

Spacing between each item.

numberoptional
px

Item symbol size.

stringoptional
left-to-right

Item layout direction.

Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

string | objectoptionaldefault:'default'
stiff

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

Accessibility
stringoptional

Main element role attribute.

stringoptional

Main element aria-label.

stringoptional

Main element aria-labelledby.

stringoptional

Main element aria-describedby.

booleanoptional
   

Make the root SVG element and each boxplot item focusable, for keyboard navigation.

(data) => stringoptional

aria-label for boxplot items.

(data) => stringoptional

aria-labelledby for boxplot items.

(data) => stringoptional

aria-describedby for boxplot items.