Skip to main content

Boxplot

Basic Configuration​

The Boxplot component has been designed to work together with XY Container. Unlike most XY components, Boxplot doesn't use a single y accessor. Instead it has three grouped accessors that map directly to the visual elements of a box-and-whisker plot:

  • median — a single number, the median line inside the box;
  • quartiles — a [q1, q3] tuple, the bottom and top of the box;
  • whiskers — a [min, max] tuple, the lower and upper whisker ends.

Grouping the quartiles and whiskers (instead of using separate scalar accessors) guarantees that a box always has both of its edges, so it can never be rendered half-drawn.

component.tsx
import { VisXYContainer, VisBoxplot } from '@unovis/react'

function Component(props) {
  const data: DataRecord[] = props.data
  const x = (d: DataRecord) =>  d.x
  const median = (d: DataRecord) =>  d.median
  const quartiles = (d: DataRecord) =>  d.quartiles
  const whiskers = (d: DataRecord) =>  d.whiskers

  return (
    <VisXYContainer data={data}>
      <VisBoxplot
        x={x} 
        median={median} 
        quartiles={quartiles} 
        whiskers={whiskers}
      />
    </VisXYContainer>
  )
}
Loading...

Using a Subset of the Accessors​

Because each accessor is wired to its visual element independently, you can provide only the ones you need.

Quartiles only​

Pass just quartiles to render bare boxes, without a median line or whiskers.

Loading...

Median only​

Pass just median to render median ticks, without boxes or whiskers.

Loading...

Color​

Set the fill color of the boxes by assigning the color property to a color string or a color accessor function. When color is not set, all boxes share the --vis-boxplot-fill-color CSS variable.

Loading...

Rounded Corners​

You can apply rounded corners to the box using the roundedCorners property, which accepts either a number (in pixels) or a boolean argument.

<VisBoxplot
  x={x} 
  median={median} 
  quartiles={quartiles} 
  whiskers={whiskers} 
  roundedCorners={5}
/>
Loading...

Box Sizing​

Box Width​

By default, the width of the boxes is calculated automatically from the spacing between neighbouring boxes. But you can also strictly set the box's width in pixels using the barWidth property:

<VisBoxplot
  x={x} 
  median={median} 
  quartiles={quartiles} 
  whiskers={whiskers} 
  barWidth={20}
/>
Loading...

Limiting Dynamic Box Width​

When you don't know the number of boxes in advance, and you're relying on automatic width calculation, you might want to limit the maximum box width using the barMaxWidth property.

Handling Missing Data with dataStep​

The automatic width calculation infers the step between boxes from the data. When your data has missing points, the step can't be inferred reliably, which can make the boxes too wide. In that case set the expected step in X units explicitly via the dataStep property.

Box Padding​

Another way to control the box's width is by changing the barPadding property, which specifies how much of the available sector should be empty, in the range of [0,1).

<VisBoxplot
  x={x} 
  median={median} 
  quartiles={quartiles} 
  whiskers={whiskers} 
  barPadding={0.5}
/>
Loading...

Events​

import { Boxplot } from '@unovis/ts'
...
events = {
    [Boxplot.selectors.box]: {
        click: (d: DataRecord) => {},
    },
}
<VisBoxplot
  x={x} 
  median={median} 
  quartiles={quartiles} 
  whiskers={whiskers} 
  events={events}
/>

CSS Variables​

The Boxplot component supports additional styling via CSS variables that you can define for your visualization container.

Supported CSS variables and their default values
--vis-boxplot-cursor: default;
--vis-boxplot-fill-color: var(--vis-color-main);
--vis-boxplot-fill-opacity: 0.2;
--vis-boxplot-stroke-color: var(--vis-color-main);
--vis-boxplot-stroke-width: 1.5px;
--vis-boxplot-median-stroke-color: var(--vis-color-main);
--vis-boxplot-median-stroke-width: 1.5px;
--vis-boxplot-whisker-stroke-color: var(--vis-color-main);
--vis-boxplot-whisker-stroke-width: 1.5px;
--vis-dark-boxplot-fill-color: var(--vis-color-main);
--vis-dark-boxplot-stroke-color: var(--vis-color-main);
--vis-dark-boxplot-median-stroke-color: var(--vis-color-main);
--vis-dark-boxplot-whisker-stroke-color: var(--vis-color-main);

Component Props​

NameTypeDescription
* required property