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:
xKeysets the candlestick's x value.lowKeymaps to the low/min value.openKeymaps to the open value.closeKeymaps to the close value.highKeymaps 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
Properties available on the AgCandlestickSeriesOptions interface.
Function used to return formatting for individual columns, based on the given parameters. If the current column is highlighted, the highlighted property will be set to true; make sure to check this if you want to differentiate between the highlighted and un-highlighted states.
Primary identifier for the series. This is provided as seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
Configuration for marker and series highlighting when a series or legend item is hovered over.
A human-readable description of open values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of close values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of high values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
A human-readable description of low values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.