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
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.