Candlestick and OHLC

Financial series: openField / highField / lowField / closeField. The X axis is ordinal-time: each point occupies a band, so weekends leave no gaps.

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 bars

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;
}

Options

Options common to all series (name, showInLegend, tooltip.renderer, …) are covered in Common series options.

Option	Type	Default	Description
xField	string	—	date (Date / timestamp / string)
openField … closeField	string	—	the four OHLC keys
width	preset	—	chart size and theme in createFinancialChart
height	preset	—	chart size and theme in createFinancialChart
theme	preset	—	chart size and theme in createFinancialChart
container	preset	—	container and data for createFinancialChart
data	preset	—	container and data for createFinancialChart
dateField	preset	date/OHLC	preset data fields
openField	preset	date/OHLC	preset data fields
highField	preset	date/OHLC	preset data fields
lowField	preset	date/OHLC	preset data fields
closeField	preset	date/OHLC	preset data fields
chartType	'candlestick' | 'ohlc'	'candlestick'	preset series type
title	preset	on	passed through to ChartOptions
navigator	preset	on	passed through to ChartOptions
zoom	preset	on	passed through to ChartOptions
annotations	preset	on	passed through to ChartOptions
item.up.fill	ColorValue	theme green	fill of rising candles
item.down.fill	ColorValue	theme red	fill of falling candles

Financial preset

A ready-made bundle in a single call — candlestick + ordinal-time + zoom + navigator + crosshair

• context menu:

import { Charts } from 'grafit-charts';

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

The keys can be overridden (dateField, openField, …), navigator: false / zoom: false disable those blocks, and annotations are passed through as-is.