Histogram

Распределение числового поля по корзинам. xField — числовое поле; без yField считается количество записей.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Session duration' },
    subtitle: { text: 'distribution, minutes' },
    series: [{ type: 'histogram', xField: 'duration', name: 'Sessions', binCount: 8 }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const durations = [
    12, 18, 22, 25, 28, 31, 33, 35, 38, 41, 42, 44, 47, 48, 51, 53, 54, 56, 58, 61, 63, 64, 67, 71, 74, 78, 82, 87, 93, 104, 36, 45, 52, 59,
    49, 39, 29, 57, 66, 73,
  ];
  return durations.map((duration) => ({ duration }));
}

Количество корзин

binCount управляет детализацией (или задайте границы явно через bins):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Bin count' },
    subtitle: { text: 'binCount: 24 vs default auto' },
    series: [{ type: 'histogram', xField: 'response', name: 'Response time, ms', binCount: 24, fillOpacity: 0.8 }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const values: Array<{ response: number }> = [];
  for (let i = 0; i < 400; i++) {
    const u = ((i * 9301 + 49297) % 233280) / 233280;
    const v = ((i * 7621 + 1) % 233280) / 233280;
    values.push({ response: Math.round(120 + 55 * (Math.sqrt(-2 * Math.log(u + 1e-6)) * Math.cos(2 * Math.PI * v))) });
  }
  return values.filter((d) => d.response > 0 && d.response < 320);
}

Подписи корзин

label — позиции как у bar (top, inner-top, center, …), formatter({ value, x0, x1 }):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Histogram with bin labels' },
    series: [
      {
        type: 'histogram',
        xField: 'score',
        name: 'Scores',
        binCount: 8,
        label: { enabled: true, placement: 'top', fontWeight: 'bold' },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const values: Array<{ score: number }> = [];
  for (let i = 0; i < 120; i++) {
    const u = ((i * 9301 + 49297) % 233280) / 233280;
    values.push({ score: Math.round(35 + 50 * u + 15 * Math.sin(i) ** 2) });
  }
  return values;
}

Опции

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

Опция	Тип	По умолчанию	Описание
xField	string	—	числовое поле для корзин
yField	string	—	поле агрегации (опционально)
aggregation	'count' | 'sum' | 'mean'	count / sum	способ агрегации (с yField — sum)
binCount	number	10	число корзин
bins	[number, number][]	—	явные границы корзин
fill	стили	палитра	оформление столбцов
stroke	стили	палитра	оформление столбцов
fillOpacity	стили	палитра	оформление столбцов
strokeWidth	стили	1	обводка корзин
label.enabled	boolean	false	показать подписи значений
label.placement	внешние/center/inner-* (17 позиций)	'top'	позиция подписи
label.formatter	({ value, x0, x1 }) => string	значение	содержимое подписи
label.fontSize	Pixels	11	размер шрифта подписи
label.fontWeight	string | number	normal	насыщенность
label.fontFamily	string	шрифт темы	гарнитура
label.color	ColorValue	foreground; внутри — автоконтраст	цвет текста