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
)
name | intervalBottom | midpoint | intervalTop |
---|---|---|---|
Experiment A | 0.02 | 0.04 | 0.08 |
Experiment B | -0.01 | 0.01 | 0.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
name | midpoint | confidenceInterval |
---|---|---|
Experiment A | 0.04 | 0.03 |
Experiment B | 0.01 | 0.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>