BoxPlot

@nivo/boxplot
svg

BoxPlot.

roll the dice
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 for non-responsive component.

numberoptional

Chart default width for responsive component.

numberrequired

Chart height for non-responsive component.

numberoptional

Chart default height for responsive component.

number (ms)optional

Debounce width/height updates for responsive component.

(dimensions: { width: number; height: number }) => voidoptional

A callback for when responsive component is resized.

objectoptional
px
px
px
px

Chart margin.

Ref<SVGSVGElement>optional

Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.

Style
Grid & Axes
Customization
Interactivity
Legends
Motion
Accessibility