BoxPlot

The BoxPlot component visualizes statistical distributions using box-and-whisker diagrams, showing the median, quartiles, and outliers. It’s ideal for comparing distributions across categories.

Props

Data Props

data

Query | array

required

Query result or array of objects containing the data to visualize

name

string

required

Column name for category labels (x-axis)

min

string

required

Column name containing minimum values (lower whisker)

intervalBottom

string

required

Column name containing lower quartile (Q1) values

midpoint

string

required

Column name containing median values

intervalTop

string

required

Column name containing upper quartile (Q3) values

max

string

required

Column name containing maximum values (upper whisker)

confidenceInterval

string

Column name for confidence interval data

Style Props

color

string

Color for the box plot (hex, rgb, or theme color name)

Formatting Props

xFmt

string

Format string for x-axis (category) values

yFmt

string

Format string for y-axis (numeric) values

Chart Layout Props

title

string

Chart title displayed at the top

subtitle

string

Chart subtitle displayed below the title

legend

boolean

Whether to show the legend

chartAreaHeight

number

Height of the chart area in pixels

Orientation Props

swapXY

boolean

default:false

Swap axes to create horizontal box plots

Axis Props

xAxisTitle

string | boolean

Title for x-axis. Use true to use column name

yAxisTitle

string | boolean

Title for y-axis. Use true to use column name

xGridlines

boolean

Show vertical gridlines

yGridlines

boolean

Show horizontal gridlines

xAxisLabels

boolean

Show labels on x-axis

yAxisLabels

boolean

Show labels on y-axis

xBaseline

boolean

Show x-axis baseline

yBaseline

boolean

Show y-axis baseline

xTickMarks

boolean

Show tick marks on x-axis

yTickMarks

boolean

Show tick marks on y-axis

Axis Scale Props

xType

string

Type of x-axis: ‘category’ | ‘time’ | ‘value’

yLog

boolean

Use logarithmic scale for y-axis

yLogBase

number

Base for logarithmic y-axis

yMin

number

Minimum value for y-axis

yMax

number

Maximum value for y-axis

Series Props

series

string

Column name to group data into multiple series

seriesColors

object

Object mapping series names to colors

Behavior Props

connectGroup

string

Connect charts for synchronized interactions

Advanced Props

echartsOptions

object

Custom ECharts configuration object

seriesOptions

object

Custom series configuration

printEchartsConfig

boolean

default:false

Print ECharts config to console

renderer

string

Renderer type: ‘canvas’ | ‘svg’

downloadableData

boolean

Enable data download

downloadableImage

boolean

Enable image download

emptySet

string

Empty data behavior: ‘pass’ | ‘warn’ | ‘error’

emptyMessage

string

Custom empty data message

leftPadding

number

Left padding for chart area

rightPadding

number

Right padding for chart area

xLabelWrap

boolean

Wrap x-axis labels

Examples

Basic Box Plot

```sql response_time_stats
select 
  endpoint,
  min(response_time) as min_time,
  percentile_cont(0.25) within group (order by response_time) as q1,
  median(response_time) as median_time,
  percentile_cont(0.75) within group (order by response_time) as q3,
  max(response_time) as max_time
from api_logs
group by endpoint

### Horizontal Box Plot

```markdown
<BoxPlot 
  data={response_time_stats} 
  name="endpoint"
  min="min_time"
  intervalBottom="q1"
  midpoint="median_time"
  intervalTop="q3"
  max="max_time"
  swapXY="true"
  title="API Response Times by Endpoint"
/>

Customized Box Plot

<BoxPlot 
  data={response_time_stats} 
  name="endpoint"
  min="min_time"
  intervalBottom="q1"
  midpoint="median_time"
  intervalTop="q3"
  max="max_time"
  color="primary"
  yFmt="#,##0"
  title="Response Time Distribution"
  yAxisTitle="Time (ms)"
  yGridlines="true"
/>

Box Plot with Custom Height

```sql salary_by_department
select 
  department,
  min(salary) as min_sal,
  percentile_cont(0.25) within group (order by salary) as q1_sal,
  median(salary) as median_sal,
  percentile_cont(0.75) within group (order by salary) as q3_sal,
  max(salary) as max_sal
from employees
group by department

Chart Components

Data Display

Input Components

Layout Components

BoxPlot

BoxPlot

Props

Data Props

Style Props

Formatting Props

Chart Layout Props

Orientation Props

Axis Props

Axis Scale Props

Series Props

Behavior Props

Advanced Props

Examples

Basic Box Plot

Customized Box Plot

Box Plot with Custom Height

Build docs developers (and LLMs) love

Chart Components

Data Display

Input Components

Layout Components

​BoxPlot

​Props

​Data Props

​Style Props

​Formatting Props

​Chart Layout Props

​Orientation Props

​Axis Props

​Axis Scale Props

​Series Props

​Behavior Props

​Advanced Props

​Examples

​Basic Box Plot

​Customized Box Plot

​Box Plot with Custom Height

Build docs developers (and LLMs) love

BoxPlot

Props

Data Props

Style Props

Formatting Props

Chart Layout Props

Orientation Props

Axis Props

Axis Scale Props

Series Props

Behavior Props

Advanced Props

Examples

Basic Box Plot

Customized Box Plot

Box Plot with Custom Height