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>

Data Structure​

Examples​

Basic Box Plot​

Horizontal Box Plot​

Box Plot with Whiskers​

Box Plot with Custom Colors​

Options​

Data​

Formatting & Styling​

Axes​

Chart​

Annotations​