Home Components Box Plot

Box Plot

Loading... 
<BoxPlot 
    data={sales_distribution_by_channel}
    name=channel
    intervalBottom=first_quartile
    midpoint=median
    intervalTop=third_quartile
    yFmt=usd0
/>

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
Google Paid 57.69 102.06 179.22
Google Organic 34.00 83.84 144.00
Facebook Ads 34.00 70.24 130.47
Referral 15.07 39.66 89.00
Coupon 9.91 34.00 67.92
Tiktok Ads 13.00 34.00 83.44
No Results

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 confidence_interval
Google Paid 102.06 20.00
Google Organic 83.84 20.00
Facebook Ads 70.24 20.00
Referral 39.66 20.00
Coupon 34.00 20.00
Tiktok Ads 34.00 20.00
No Results

Examples

Basic Box Plot

Loading... 
<BoxPlot 
    data={sales_distribution_by_channel}
    name=channel
    intervalBottom=first_quartile
    midpoint=median
    intervalTop=third_quartile
    yFmt=usd0
/>

Horizontal Box Plot

Loading... 
<BoxPlot 
    data={sales_distribution_by_channel}
    name=channel
    intervalBottom=first_quartile
    midpoint=median
    intervalTop=third_quartile
    yFmt=usd0
    swapXY=true
/>

Box Plot with Whiskers

Loading... 
<BoxPlot 
    data={sales_distribution_by_channel}
    name=channel
    min=min
    intervalBottom=first_quartile
    midpoint=median
    intervalTop=third_quartile
    max=max
    yFmt=usd0
/>

Box Plot with Custom Colors

Loading... 
<BoxPlot 
    data={sales_distribution_by_channel}
    name=channel
    intervalBottom=first_quartile
    midpoint=median
    intervalTop=third_quartile
    yFmt=usd0
    color=color
/>

Options

Data

data
Required
Query name, wrapped in curly braces
Options:
query name
name
Required
Column to use for the names of each box in your plot
Options:
column name
min
Column containing minimum values, appearing as whisker
Options:
column name
intervalBottom
Column containing values for bottom of box
Options:
column name
midpoint
Required
Column containing values for midpoint of box
Options:
column name
intervalTop
Column containing values for top of box
Options:
column name
max
Column containing maximum values, appearing as whisker
Options:
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
Options:
column name
emptySet
Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed.
Options:
Default:
error
emptyMessage
Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.).
Options:
string
Default:
No records

Formatting & Styling

color
Column containing color strings
Options:
column name
yFmt
Format to use for y column (<a class=markdown href='/core-concepts/formatting'>see available formats<a/>)
Options:
Excel-style format | built-in format name | custom format name
seriesColors
Apply a specific color to each series in your chart. Unspecified series will receive colors from the built-in palette as normal.
Options:
object with series names and assigned colors
Default:
colors applied by order of series in data

Axes

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

Chart

title
Chart title. Appears at top left of chart.
Options:
string
subtitle
Chart subtitle. Appears just under title.
Options:
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.
Options:
number
Default:
180
renderer
Which chart renderer type (canvas or SVG) to use. See ECharts' <a href='https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/' class=markdown>documentation on renderers</a>.
Options:
Default:
canvas
downloadableData
Whether to show the download button to allow users to download the data
Options:
Default:
true
downloadableImage
Whether to show the button to allow users to save the chart as an image
Options:
Default:
true

Custom Echarts Options

echartsOptions
Custom Echarts options to override the default options. See <a href='/components/echarts-options/' class=markdown>reference page</a> for available options.
Options:
{{exampleOption:'exampleValue'}}
seriesOptions
Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See <a href='/components/echarts-options/' class=markdown>reference page</a> for available options.
Options:
{{exampleSeriesOption:'exampleValue'}}
printEchartsConfig
Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options
Options:
Default:
false

Interactivity

connectGroup
Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected

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>