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: { text: '$ 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 and input checks as the Candlestick, which shares its input shape.
• The helper returns { candles, data, categoryAxis, series }. The bars are six ordinary bar series — an up and a down low→high line narrowed to a sliver of the slot with bar.widthFraction, plus per direction an open and a close tick. Every row carries values for exactly one direction, and missingValueMode: '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 — bar.minExtent expands them into visible marks (tickExtent, default 2px). Each tick is a half-width bar pushed to one side of the slot with bar.alignFraction: 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 — Jun 05 sits next to Jun 08 above.
• The default direction colors are teal-green/red rather than a pure green/red: green↔red is the classic red-green-blindness collision, and shifting the green toward teal keeps the pair distinguishable on light and dark surfaces. Override per direction with colors, rename the legend entries with seriesTitles, and tune the geometry with lineWidthFraction (default 0.15) / tickWidthFraction (default 0.5) / 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.