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
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.