Candlestick и OHLC

Финансовые серии: openField / highField / lowField / closeField. Ось X — ordinal-time: каждая точка занимает бэнд, выходные не оставляют дыр.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'CHRT / USD' },
    series: [{ type: 'candlestick', xField: 'date', openField: 'open', highField: 'high', lowField: 'low', closeField: 'close' }],
    axes: [
      { type: 'ordinal-time', position: 'bottom' },
      { type: 'number', position: 'right' },
    ],
    zoom: { enabled: true },
    crosshair: { enabled: true },
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const start = Date.UTC(2025, 8, 1);
  const day = 24 * 60 * 60 * 1000;
  const data: Array<{ date: Date; open: number; high: number; low: number; close: number }> = [];
  let price = 250;
  for (let i = 0; i < 45; i++) {
    const weekday = new Date(start + i * day).getUTCDay();
    if (weekday === 0 || weekday === 6) continue; // ordinal-time leaves no gaps
    const drift = Math.sin(i / 6) * 3 + ((i * 11) % 7) - 3;
    const open = price;
    const close = Math.round((price + drift) * 100) / 100;
    const high = Math.max(open, close) + ((i * 5) % 4) + 1;
    const low = Math.min(open, close) - ((i * 3) % 4) - 1;
    data.push({ date: new Date(start + i * day), open, high, low, close });
    price = close;
  }
  return data;
}

OHLC-бары

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'OHLC bars' },
    series: [{ type: 'ohlc', xField: 'date', openField: 'open', highField: 'high', lowField: 'low', closeField: 'close' }],
    axes: [
      { type: 'ordinal-time', position: 'bottom' },
      { type: 'number', position: 'right' },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const start = Date.UTC(2025, 10, 3);
  const day = 24 * 60 * 60 * 1000;
  const data: Array<{ date: Date; open: number; high: number; low: number; close: number }> = [];
  let price = 88;
  for (let i = 0; i < 30; i++) {
    const weekday = new Date(start + i * day).getUTCDay();
    if (weekday === 0 || weekday === 6) continue;
    const drift = Math.cos(i / 4) * 2 + ((i * 7) % 5) - 2;
    const open = price;
    const close = Math.round((price + drift) * 100) / 100;
    data.push({
      date: new Date(start + i * day),
      open,
      high: Math.max(open, close) + 1.5,
      low: Math.min(open, close) - 1.2,
      close,
    });
    price = close;
  }
  return data;
}

Опции

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

Опция	Тип	По умолчанию	Описание
xField	string	—	дата (Date / timestamp / строка)
openField … closeField	string	—	четыре ключа OHLC
width	preset	—	размер и тема чарта в createFinancialChart
height	preset	—	размер и тема чарта в createFinancialChart
theme	preset	—	размер и тема чарта в createFinancialChart
container	preset	—	контейнер и данные createFinancialChart
data	preset	—	контейнер и данные createFinancialChart
dateField	preset	date/OHLC	поля данных пресета
openField	preset	date/OHLC	поля данных пресета
highField	preset	date/OHLC	поля данных пресета
lowField	preset	date/OHLC	поля данных пресета
closeField	preset	date/OHLC	поля данных пресета
chartType	'candlestick' | 'ohlc'	'candlestick'	тип серии пресета
title	preset	вкл.	прокидываются в ChartOptions
navigator	preset	вкл.	прокидываются в ChartOptions
zoom	preset	вкл.	прокидываются в ChartOptions
annotations	preset	вкл.	прокидываются в ChartOptions
item.up.fill	ColorValue	зелёный темы	заливка растущих свечей
item.down.fill	ColorValue	красный темы	заливка падающих

Financial preset

Готовая сборка одним вызовом — candlestick + ordinal-time + zoom + navigator + crosshair

• контекстное меню:

import { Charts } from 'grafit-charts';

const chart = Charts.createFinancialChart({
  container,
  data, // [{ date, open, high, low, close }]
  title: 'CHRT / USD',
  chartType: 'candlestick', // | 'ohlc'
});

Ключи переопределяются (dateField, openField, …), navigator: false / zoom: false отключают блоки, annotations пробрасываются как есть.