Vue ChartsCandlestick Series

A Candlestick Series shows open and close data with bars, and high and low data with wicks.

Simple Candlestick

To create a Candlestick Series, use the candlestick series type.

series: [
    {
        type: 'candlestick',
        xKey: 'date',
        lowKey: 'low',
        openKey: 'open',
        closeKey: 'close',
        highKey: 'high',
    },
],

In this configuration:

• xKey sets the candlestick's x value.
• lowKey maps to the low/min value.
• openKey maps to the open value.
• closeKey maps to the close value.
• highKey maps to the high/max value.

Customisation

Series items are customised via the item configuration object.

Data items with a closing value higher than the opening value are considered as up, and those with a closing value lower than the opening value are down.

The properties item.up and item.down control the display of rising and falling series items.

Candlestick wicks inherit series item styles but can be individually customised. Here, the wick property on item.up and item.down is used to customise the wick line styles of the rising and falling candlestick items.

series: [
    {
        type: 'candlestick',
        // ...
        item: {
            up: {
                fill: 'transparent',
                stroke: '#5090dc',
                wick: {
                    strokeWidth: 2,
                },
            },
            down: {
                fill: '#5090dc',
                stroke: '#5090dc',
                wick: {
                    strokeWidth: 2,
                },
            },
        },
    },
],

API Reference