BoxPlot

Live preview

Loading example…

Box-and-whisker plot: median, quartiles, Tukey whiskers, outliers and the mean for every category, optionally grouped by series.

Import

import { BoxPlot } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/box-plot.

Usage

<BoxPlot
  title="Duración del corte por barbero"
  categories={barbers}
  series={[{ id: "corte", name: "Corte", data: haircutMinutes }]}
  valueFormat={minutes}
  valueAxis={{ title: "min" }}
  orientation="vertical"
  whisker={1.5}
  showMean
  showOutliers
  height={320}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name of the chart and caption of its data table.
`categories` *	`readonly string[]`		One box (per series) for each category, e.g. the barbers.
`series` *	`readonly DistributionSeries[]`		`data[i]` holds the raw samples of `categories[i]`. Several series are drawn side by side.
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	“vertical”: boxes stand on the x axis. “horizontal”: one row per category.
`valueFormat`	`ValueFormat`
`valueAxis`	`DistributionAxisOptions`
`whisker`	`number`	`1.5`	Tukey fence multiplier; `Infinity` stretches the whiskers to min and max.
`showMean`	`boolean`	`true`	Diamond on the mean.
`showOutliers`	`boolean`	`true`	Dots for values outside the whiskers.
`showPoints`	`boolean`	`false`	Every raw observation as a dot over the box, with deterministic jitter.
`jitter`	`number`	`0.7`	Share (0-1) of the box width the dots spread over.
`pointColor`	`"value" \| "series"`	`"series"`	“value” grades each dot from pale to full colour across the value range.
`seed`	`number`	`11`	Seed of the jitter, so the dots are stable between renders.
`height`	`number \| "fill"`	`320`	Height of the drawing in pixels.
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`legend`	`boolean \| "top" \| "bottom"`		Shown automatically with more than one series.
`grid`	`boolean`	`true`
`tooltip`	`boolean`	`true`
`loading`	`boolean`
`animate`	`boolean`	`true`
`labels`	`Partial<DistributionLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/box-plot/box-plot.tsx