Range Bar и Range Area

Серии диапазонов: вместо yField — пара yLowField / yHighField.

Range Area

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Temperature range' },
    series: [{ type: 'range-area', xField: 'month', yLowField: 'min', yHighField: 'max', name: 'Min–Max, °C' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', min: -12, max: -2 },
    { month: 'Feb', min: -10, max: 0 },
    { month: 'Mar', min: -4, max: 6 },
    { month: 'Apr', min: 2, max: 14 },
    { month: 'May', min: 8, max: 21 },
    { month: 'Jun', min: 13, max: 26 },
    { month: 'Jul', min: 15, max: 29 },
    { month: 'Aug', min: 13, max: 27 },
    { month: 'Sep', min: 8, max: 20 },
    { month: 'Oct', min: 2, max: 11 },
    { month: 'Nov', min: -4, max: 4 },
    { month: 'Dec', min: -9, max: -1 },
  ];
}

Range Bar

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Salary ranges' },
    subtitle: { text: 'thousand ₽ per month' },
    series: [{ type: 'range-bar', xField: 'role', yLowField: 'from', yHighField: 'to', name: 'Range' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { role: 'Junior', from: 80, to: 150 },
    { role: 'Middle', from: 160, to: 260 },
    { role: 'Senior', from: 250, to: 400 },
    { role: 'Lead', from: 320, to: 480 },
  ];
}

Горизонтальные range-бары

direction: 'horizontal' разворачивает чарт: категории уходят на вертикальную ось.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Salary ranges' },
    subtitle: { text: 'thousand ₽ per month' },
    series: [
      {
        type: 'range-bar',
        xField: 'role',
        yLowField: 'from',
        yHighField: 'to',
        name: 'Range',
        direction: 'horizontal',
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { role: 'Junior', from: 80, to: 150 },
    { role: 'Middle', from: 160, to: 260 },
    { role: 'Senior', from: 250, to: 400 },
    { role: 'Lead', from: 320, to: 480 },
  ];
}

Цвет на каждый бар (Гант)

fill принимает колбэк ({ low, high, datum, index }) => цвет — красит каждый бар отдельно, например Гант-таймлайн по статусу задачи из одной серии:

config.ts

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

// Colour each task bar by its status — a Gantt-style timeline from a single range-bar series.
const STATUS_COLORS: Record<string, string> = {
  done: '#22c55e',
  running: '#3b82f6',
  failed: '#ef4444',
  queued: '#94a3b8',
};

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Pipeline run' },
    subtitle: { text: 'task timeline, hours' },
    series: [
      {
        type: 'range-bar',
        xField: 'task',
        yLowField: 'start',
        yHighField: 'end',
        direction: 'horizontal',
        cornerRadius: 3,
        fill: ({ datum }) => STATUS_COLORS[String(datum.status)] ?? '#94a3b8',
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { task: 'extract', start: 0, end: 3, status: 'done' },
    { task: 'validate', start: 3, end: 5, status: 'done' },
    { task: 'transform', start: 5, end: 11, status: 'running' },
    { task: 'notify', start: 8, end: 10, status: 'failed' },
    { task: 'load', start: 11, end: 14, status: 'queued' },
    { task: 'report', start: 14, end: 16, status: 'queued' },
  ];
}

Подписи диапазонов

label.formatter({ low, high, datum }); позиции как у bar — здесь center внутри бара с автоконтрастом:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Ranges with labels' },
    series: [
      {
        type: 'range-bar',
        xField: 'city',
        yLowField: 'min',
        yHighField: 'max',
        name: 'Temperature, °C',
        label: {
          enabled: true,
          placement: 'center',
          formatter: ({ low, high }) => `${low}…${high}`,
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { city: 'Moscow', min: -8, max: 2 },
    { city: 'Sochi', min: 4, max: 12 },
    { city: 'Novosibirsk', min: -16, max: -6 },
    { city: 'Kazan', min: -10, max: 0 },
    { city: 'Vladivostok', min: -7, max: 1 },
  ];
}

Комбинация со средней линией

Range-area как фон + line поверх, общий тултип:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Range + average line' },
    series: [
      {
        type: 'range-area',
        xField: 'month',
        yLowField: 'min',
        yHighField: 'max',
        name: 'Range, °C',
        fillOpacity: 0.25,
      },
      { type: 'line', xField: 'month', yField: 'avg', name: 'Average', strokeWidth: 2.5 },
    ],
    tooltip: { mode: 'shared', range: 'nearest' },
  };
}

data.ts

export function getData() {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return months.map((month, i) => {
    const mid = 8 + 14 * Math.sin(((i - 3) / 12) * Math.PI * 2);
    return {
      month,
      min: Math.round(mid - 5 - (i % 3)),
      max: Math.round(mid + 6 + ((i + 1) % 3)),
      avg: Math.round(mid),
    };
  });
}

Опция	Тип	Описание
yLowField	string	границы диапазона
yHighField	string	границы диапазона
direction (bar)	'vertical' | 'horizontal'	направление баров (vertical)
fill	ColorValue | (params) => ColorValue	заливка; колбэк красит по datum
fill	стили	заливка
fillOpacity	стили	заливка
stroke (area)	стили	контурные линии
strokeWidth (area)	стили	контурные линии
cornerRadius (bar)	Pixels	скругление

Полный список опций

Опция	Тип	По умолчанию	Описание
label.enabled	boolean	false	показать подписи значений
label.placement	внешние/center/inner-* (17 позиций)	'top'	позиция подписи
label.formatter	({ low, high, datum }) => string	значение	содержимое подписи
label.fontSize	Pixels	11	размер шрифта подписи
label.fontWeight	string | number	normal	насыщенность
label.fontFamily	string	шрифт темы	гарнитура
label.color	ColorValue	foreground; внутри — автоконтраст	цвет текста

Опции

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