Skip to main content

Box Plot

<BoxPlot 
data={box}
name=experiment
midpoint=value
confidenceInterval=confidence
yFmt='+0.0%;-0.0%;0'
/>

Data Structure

The BoxPlot component requires pre-aggregated data, with one row per box you would like to display. There are 2 ways to pass in the values needed to construct the box:

1. Explicitly define each value (e.g., min, intervalBottom, midpoint, intervalTop, max)

nameintervalBottommidpointintervalTop
Experiment A0.020.040.08
Experiment B-0.010.010.02

This example table excludes whiskers which would be defined with min and max columns

2. Define a midpoint and a confidenceInterval - this will add the interval to the midpoint to get the max, and subtract to get the min

namemidpointconfidenceInterval
Experiment A0.040.03
Experiment B0.010.04

Examples

Basic Box Plot

<BoxPlot 
data={box}
name=experiment
midpoint=value
confidenceInterval=confidence
yFmt='+0.0%;-0.0%;0'
/>

Horizontal Box Plot

<BoxPlot 
data={box}
name=experiment
midpoint=value
confidenceInterval=confidence
swapXY=true
yFmt='+0.0%;-0.0%;0'
/>

Box Plot with Whiskers

<BoxPlot 
data={box}
name=experiment
midpoint=value
min=min
max=max
confidenceInterval=confidence
yFmt='+0.0%;-0.0%;0'
/>

Box Plot with Custom Colors

<BoxPlot 
data={box}
name=experiment
midpoint=value
min=min
max=max
color=color
confidenceInterval=confidence
swapXY=true
yFmt='+0.0%;-0.0%;0'
/>

Options

Data

Name Description Required? Options Default
data Query name, wrapped in curly braces Yes query name -
name Column to use for the names of each box in your plot Yes column name -
min Column containing minimum values, appearing as whisker - column name -
intervalBottom Column containing values for bottom of box - column name -
midpoint Column containing values for midpoint of box Yes column name -
intervalTop Column containing values for top of box - column name -
max Column containing maximum values, appearing as whisker - column name -
confidenceInterval Column containing value to use in place of intervalBottom and intervalTop. Is subtracted from midpoint to get the bottom and added to midpoint to get the top - column name -

Formatting & Styling

Name Description Required? Options Default
color Column containing color strings - column name -
yFmt Format to use for y column (see available formats) - Excel-style format | buil-in format name | custom format name -

Axes

Name Description Required? Options Default
swapXY Swap the x and y axes to create a horizontal chart - true | false false
xAxisTitle Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false - true | string | false false
yAxisTitle Name to show beside y-axis. If 'true', formatted column name is used. - true | string | false false
xGridlines Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false) - true | false false
yGridlines Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false) - true | false true
xAxisLabels Turns on/off value labels on the x-axis - true | false true
yAxisLabels Turns on/off value labels on the y-axis - true | false true
xBaseline Turns on/off thick axis line (line appears at y=0) - true | false true
yBaseline Turns on/off thick axis line (line appears directly alongside the y-axis labels) - true | false false
xTickMarks Turns on/off tick marks for each of the x-axis labels - true | false false
yTickMarks Turns on/off tick marks for each of the y-axis labels - true | false false
yMin Starting value for the y-axis - number -
yMax Maximum value for the y-axis - number -
showAllXAxisLabels Force every x-axis value to be shown. This can truncate labels if there are too many. - true|false false

Chart

Name Description Required? Options Default
title Chart title. Appears at top left of chart. - string -
subtitle Chart subtitle. Appears just under title. - string -
chartAreaHeight Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. - number 180

Annotations

Box plots can include annotations using the ReferenceLine and ReferenceArea components. These components are used within a chart component like so:

<BoxPlot 
data={box}
name=experiment
midpoint=value
confidenceInterval=confidence
>
<ReferenceLine y=0.04 label='Target'/>
</BoxPlot>