boxPlot

Configuration Structure

boxPlot: {
colors: { ... },
upper: string | string[],
lower: string | string[],
points: { ... },
show: boolean,
shape: 'circle' | 'square',
size: number,
jitter: number,
maxPoints: number,
opacity: number,
fillColor: string,
strokeColor: string,
strokeWidth: number,
colorScale: { ... },
colors: string[],
min: number,
max: number,
steps: number,
}

plotOptions

upper

boxPlot.colors.upper

Color for the upper quartile (Q3 to median) of the box plot.

lower

boxPlot.colors.lower

Color for the lower quartile (median to Q1) of the box plot.

points

Overlay each box with its individual observations as small jittered dots, so the reader sees the raw distribution behind the summary. Inert unless a data point supplies a points: number[] array of the raw values, and off by default so existing box plots are unchanged.

series: [{
  data: [
    { x: 'Team A', y: [54, 66, 69, 75, 88], points: [51, 58, 63, 67, 70, 74, 79, 86] }
  ]
}],
plotOptions: {
  boxPlot: {
    points: {
      show: true,
      jitter: 0.6
    }
  }
}

show

boxPlot.points.show
Default: false

Draw the observation dots. Requires each data point to carry a points array.

shape

boxPlot.points.shape
Default: 'circle'

Marker shape for each dot.

Available Options:

  • circle
  • square

size

boxPlot.points.size
Default: 2.5

Marker radius, in pixels.

jitter

boxPlot.points.jitter
Default: 0.5

Horizontal spread, as a 0..1 fraction of the box half-width. 0 stacks the dots on the centre line; higher values fan them out.

maxPoints

boxPlot.points.maxPoints
Default: 3000

Cap on the number of dots drawn per box. Boxes with more observations are stride-thinned down to this count.

opacity

boxPlot.points.opacity
Default: 0.9

Opacity of the dots.

fillColor

boxPlot.points.fillColor
Default: 'series-dark'

Dot fill colour. 'series-dark' (the default) is a darker shade of the series colour; 'series' uses the series colour; or pass any literal colour string.

strokeColor

boxPlot.points.strokeColor
Default: '#fff'

Colour of the outline around each dot.

strokeWidth

boxPlot.points.strokeWidth
Default: 1

Width of the dot outline, in pixels. 0 disables it.

colorScale

boxPlot.points.colorScale

Colour each dot by its value along a colour ramp, overriding fillColor. Pass { colors, min, max, steps }. Dots are bucketed into steps shades to keep rendering fast.