HLC area series

A custom series for high-low-close data. It draws the high, low, and close values as three lines. The band between the lines is filled with two colors: one between high and close, another between close and low. The result reads like a candlestick's range without the visual weight of individual candles.

Use it to show a value together with its range over time. Typical examples: a daily close between its high and low, a forecast with its confidence band, the minimum, average, and maximum of a metric, or a mid price between bid and ask.

Usage​

Add the series with createHLCAreaSeries, then set data with high, low, and close values:

import { createChart } from 'lightweight-charts';
import { createHLCAreaSeries } from '@tradingview/lwc-plugin-hlc-area-series';

const chart = createChart(document.getElementById('container'));
const series = createHLCAreaSeries(chart, {
    highLineColor: '#089981',
    lowLineColor: '#F23645',
    closeLineColor: '#787B86',
});

series.setData([
    { time: '2024-04-22', high: 104.2, low: 98.7, close: 101.3 },
    { time: '2024-04-23', high: 105.0, low: 100.1, close: 104.6 },
    { time: '2024-04-24', high: 106.8, low: 103.2, close: 103.9 },
]);

Each data point is { time, high, low, close }. Points missing any of the three values are treated as whitespace, and leave a gap. The series' price line and last-value label follow the close value.

Options can be changed at runtime with series.applyOptions({ ... }).

Options​

In addition to the standard series options (priceLineVisible, lastValueVisible, priceFormat, autoscaleInfoProvider, …):

areaTopColor and areaBottomColor are deprecated aliases of highAreaColor and lowAreaColor. They still work, and take precedence when both are set.

A band is filled with a gradient only when both stops of its pair are set; while either is an empty string the flat highAreaColor / lowAreaColor is used. The gradient runs down the whole pane, like the built-in Area series' topColor and bottomColor without relativeGradient.

Notes​

• The price scale autoscales to the full low–high range, so the band is never clipped.
• Points missing any of high, low and close are whitespace. The lines and the fills break at a run of whitespace instead of bridging it, and a point whose price falls off the scale is skipped rather than turned into a NaN coordinate.
• The lines and the fills continue past the first and the last visible point, so they reach the edges of the pane while panning.
• Line widths follow the library's LineWidth type, so 0 is not one of them. Use highLineVisible / lowLineVisible / closeLineVisible to hide a line and areaVisible to hide both fills.
• On hosts that support them (Lightweight Charts™ 5.1 and later) the series reports the bar under the cursor through hitTest and highlights its three values, and conflated points are merged as the highest high, the lowest low and the last close.

Explicit whitespace​

Use createHLCAreaSeries to retain whitespace passed through setData and update, including historical corrections. Other series' timestamps do not break the area. The low-level HLCAreaSeries view remains available, but without the factory's gap predicate it draws continuously: the host does not provide whitespace to custom renderers.

Under time-scale conflation the area is drawn from buckets of several bars, and a whitespace run narrower than one bucket cannot be resolved at that bar spacing: it is absorbed into the bucket rather than breaking the area at every bar. Zooming in past the conflation threshold shows the gap again.