Rounded candles series

A custom candlestick series with rounded candle bodies. It renders the same open-high-low-close data as the built-in candlestick series. Each body is drawn as a rounded rectangle. The corner radius adapts to the bar spacing: sharp when zoomed out, soft when zoomed in.

Use it as a drop-in replacement for the built-in candlesticks wherever a softer visual style fits, such as dashboards, embedded widgets, or marketing pages.

Usage​

Add the series with addCustomSeries, then set candlestick data:

import { createChart } from 'lightweight-charts';
import { RoundedCandleSeries } from '@tradingview/lwc-plugin-rounded-candles-series';

const chart = createChart(document.getElementById('container'));
const series = chart.addCustomSeries(new RoundedCandleSeries(), {
    upColor: '#089981',
    downColor: '#F23645',
    wickUpColor: '#089981',
    wickDownColor: '#F23645',
});

series.setData([
    { time: '2024-04-22', open: 100.2, high: 104.6, low: 99.1, close: 103.8 },
    { time: '2024-04-23', open: 103.8, high: 105.0, low: 101.4, close: 102.0 },
    { time: '2024-04-24', open: 102.0, high: 106.1, low: 101.7, close: 105.4 },
]);

Each data point is { time, open, high, low, close } — the same shape as the built-in candlestick series. Points missing any of the four values are treated as whitespace, and leave a gap.

A constant radius fixes the corner rounding regardless of zoom:

series.applyOptions({ radius: 6 });

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

Options​

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

Each data point may also carry color, borderColor and wickColor, which override the corresponding options for that candle only — the same per-item overrides the built-in candlestick series supports.

Notes​

• A candle counts as rising when open <= close, exactly as the built-in candlestick series decides it. upDownMode: 'previousClose' restores the behaviour this plugin had while it was an example (close compared with the previous close, the first candle always rising).
• borderColor and wickColor are resolved at draw time, so clearing them (setting them to an empty string) brings the up/down pair back. The built-in series copies them into the pair once, in applyOptions, and cannot be reverted that way.
• Wicks are drawn above and below the body rather than as one bar behind it, so a translucent body does not show its own wick through itself.
• On hosts that support them (Lightweight Charts™ 5.1 and later) the series reports the candle under the cursor through hitTest, and conflated candles are merged open-first, close-last with the extremes of both.
• Rounded corners use CanvasRenderingContext2D.roundRect, which every browser the library supports provides.