Box Plot

Распределение по пяти статистикам на категорию: 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 },
  ];
}

Опция	Тип	По умолчанию	Описание
xField	string	—	категория
minField…maxField	string	—	пять статистик
fill	стили	палитра	заливка бокса
fillOpacity	стили	0.45	заливка бокса
stroke	стили	цвет заливки	контуры и усы
strokeWidth	стили	1.5	контуры и усы
capLengthRatio	Fraction	0.5	ширина «шапок» усов
q1Field	string	—	квартили и медиана
medianField	string	—	квартили и медиана
q3Field	string	—	квартили и медиана

Стилизация

Цвета бокса, обводка и доля ширины усов (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 },
  ];
}

Опции

Общие опции всех серий (name, showInLegend, tooltip.renderer, …) — в разделе Общие опции серий.