OHLC Bars

The createOhlc helper turns OHLC (open/high/low/close) items into tick bars: a thin direction-colored line spanning low→high, with a tick on the left marking the open and a tick on the right marking the close.

Open in demo ↗

// createOhlc turns OHLC items into tick bars: a thin low/high line per period
// with a left open tick and a right close tick — six ordinary bar series.
import { createOhlc } from '@mochart/core';
import type { MochartInputConfig } from '@mochart/core';

const ohlc = createOhlc([
  { label: 'Jun 01', open: 96.5, high: 97.4, low: 96.1, close: 97.1 },
  { label: 'Jun 02', open: 97.2, high: 99.2, low: 97.2, close: 98.6 },
  { label: 'Jun 03', open: 98.1, high: 102.3, low: 98.0, close: 101.2 },
  { label: 'Jun 04', open: 101.4, high: 101.8, low: 98.4, close: 99.1 },
  { label: 'Jun 05', open: 99.0, high: 99.6, low: 96.8, close: 97.3 },
  { label: 'Jun 08', open: 97.5, high: 98.8, low: 96.9, close: 98.4 },
  { label: 'Jun 09', open: 98.3, high: 98.5, low: 95.7, close: 96.2 },
  { label: 'Jun 10', open: 96.2, high: 97.9, low: 95.9, close: 97.6 },
  { label: 'Jun 11', open: 97.7, high: 100.4, low: 97.5, close: 100.1 },
  { label: 'Jun 12', open: 100.0, high: 100.9, low: 98.6, close: 99.0 }
]);

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Daily Share Price (fictional, $)' },
  categoryAxis: ohlc.categoryAxis,
  valueAxes: [{ title: '$ per share' }],
  series: ohlc.series
};

export const data = ohlc.data;

How it works

• Each item is { label, open, high, low, close }. A bar is up when the close is at or above the open, down otherwise — the same math as the Candlestick, which shares its input shape.
• The bars are six ordinary bar series — an up and a down low→high line narrowed to a sliver of the slot with barWidthFraction, plus per direction an open and a close tick. Every row carries values for exactly one direction, and missingValues: 'connect' with partialRangeIsMissing keeps the other direction's series from rendering.
• The ticks are ranged bars whose property and rangeProperty read the same value, so they'd have zero extent — barMinExtent expands them into visible marks (tickExtent, default 2px). Each tick is a half-width bar pushed to one side of the slot with barAlignFraction: the open tick spans slot-start→center and the close tick center→slot-end, meeting at the line.
• The category axis is ordinal, so non-trading days (weekends, holidays) simply don't exist on the axis instead of leaving gaps — note Jun 05 sits next to Jun 08 above.
• The default direction colors are aqua/red rather than the conventional green/red: green↔red is the classic red-green-blindness collision, while this pair stays distinguishable on light and dark surfaces. Override per direction with colors, rename the legend entries with seriesTitles, and tune the geometry with lineWidthFraction / tickWidthFraction / tickExtent.
• The tooltip shows three rows per bar: the line's low – high span under rangeTitle (default "Range") and single-value rows for the ticks under openTitle / closeTitle (defaults "Open" / "Close"). The ticks stay out of the legend but follow their line's legend filtering and focus via followSeries, so toggling a direction removes whole bars and focusing a direction highlights whole bars.
• Each row also carries the raw open/high/low/close plus change and direction, and the computed bars come back under candles — the helper reuses computeCandlesticks(items) for the math.
• Items with a volume can add the classic volume pane via volume: true, exactly as in the Candlestick recipe.