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: '2026-06-01', open: 96.5, high: 97.4, low: 96.1, close: 97.1 },
  { label: '2026-06-02', open: 97.2, high: 99.2, low: 97.2, close: 98.6 },
  { label: '2026-06-03', open: 98.1, high: 102.3, low: 98.0, close: 101.2 },
  { label: '2026-06-04', open: 101.4, high: 101.8, low: 98.4, close: 99.1 },
  { label: '2026-06-05', open: 99.0, high: 99.6, low: 96.8, close: 97.3 },
  { label: '2026-06-08', open: 97.5, high: 98.8, low: 96.9, close: 98.4 },
  { label: '2026-06-09', open: 98.3, high: 98.5, low: 95.7, close: 96.2 },
  { label: '2026-06-10', open: 96.2, high: 97.9, low: 95.9, close: 97.6 },
  { label: '2026-06-11', open: 97.7, high: 100.4, low: 97.5, close: 100.1 },
  { label: '2026-06-12', open: 100.0, high: 100.9, low: 98.6, close: 99.0 }
], { axisType: 'date' });

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Daily Share Price (fictional, $)' },
  categoryAxis: {
    ...ohlc.categoryAxis,
    tickLabel: { format: '%b %d' },
    minorTickLabel: {
      format: '%a',
      font: { size: '0.85em' },
      textStyle: { normal: { fillOpacity: 0.6 }, focused: { fillOpacity: 0.6 }, defocused: { fillOpacity: 0.3 } }
    },
    valueFormat: '%a %b %d',
    tickStep: { interval: 'week' }
  },
  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, with 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, and 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: above, the Friday before Jun 08 sits right next to it, with no weekend between. With axisType: 'date' the labels are ISO date strings, timestamps or Dates on an ordinal date axis, so the axis fragment can be spread with a d3 time tickLabel.format and tooltip valueFormat as above; without it every label is a string shown as given.
• With months of daily bars the generated tick labels are truncated or skipped at arbitrary days; step the ticks by week with tickStep, or list the dates to label in ticks. See labeling chosen dates.
• 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.