Box Plot

Distribution via five statistics per category: minField, q1Field, medianField, q3Field, maxField.

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Service Latency' },
    subtitle: { text: 'ms, distribution over 24 hours' },
    series: [
      {
        type: 'box-plot',
        xField: 'service',
        minField: 'min',
        q1Field: 'q1',
        medianField: 'median',
        q3Field: 'q3',
        maxField: 'max',
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { service: 'API', min: 18, q1: 32, median: 41, q3: 55, max: 96 },
    { service: 'Web', min: 25, q1: 48, median: 62, q3: 81, max: 140 },
    { service: 'Search', min: 12, q1: 22, median: 28, q3: 38, max: 71 },
    { service: 'Payments', min: 30, q1: 52, median: 70, q3: 95, max: 180 },
  ];
}

Option	Type	Default	Description
xField	string	—	category
minField…maxField	string	—	the five statistics
fill	styles	palette	box fill
fillOpacity	styles	0.45	box fill
stroke	styles	fill color	outlines and whiskers
strokeWidth	styles	1.5	outlines and whiskers
capLengthRatio	Fraction	0.5	width of whisker caps
groupGap	Fraction	0.2	gap between boxes of one group
itemStyler	(params) => style	—	style of one box; params add min…max, the stroke covers the whole glyph
q1Field	string	—	quartiles and median
medianField	string	—	quartiles and median
q3Field	string	—	quartiles and median

Styling

Box colors, stroke, and the whisker width fraction (capLengthRatio):

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Review Time by Sprint' },
    subtitle: { text: 'custom colors and whisker cap width' },
    series: [
      {
        type: 'box-plot',
        xField: 'sprint',
        minField: 'min',
        q1Field: 'q1',
        medianField: 'median',
        q3Field: 'q3',
        maxField: 'max',
        name: 'Hours',
        fill: '#9a7bff',
        fillOpacity: 0.45,
        stroke: '#6f5bd7',
        strokeWidth: 1.5,
        capLengthRatio: 0.4,
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { sprint: 'S-41', min: 1, q1: 2, median: 3, q3: 5, max: 9 },
    { sprint: 'S-42', min: 1, q1: 3, median: 4, q3: 6, max: 11 },
    { sprint: 'S-43', min: 2, q1: 3, median: 5, q3: 7, max: 10 },
    { sprint: 'S-44', min: 1, q1: 2, median: 4, q3: 5, max: 8 },
    { sprint: 'S-45', min: 2, q1: 4, median: 5, q3: 8, max: 13 },
  ];
}

Options

Options common to all series (name, showInLegend, tooltip.renderer, …) are covered in Common series options.

A box is five numbers, and tooltip.renderer is handed all of them — BoxPlotTooltipRendererParams: { datum, xValue, min, q1, median, q3, max, seriesName, color }.

tooltip: { renderer: ({ median, q1, q3 }) => `median ${median} (${q1}–${q3})` },

Without a renderer the five rows are named max, q3, median, q1, min — all locale keys.