A Candlestick Series shows open and close data with bars, and high and low data with wicks.
Simple Candlestick Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
AnimationModule,
CandlestickSeriesModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CandlestickSeriesModule,
CrosshairModule,
LegendModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ContextMenuModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
data: getData(),
title: {
text: "S&P 500 Index",
},
subtitle: {
text: "Daily High and Low Prices",
},
footnote: {
text: "1 Aug 2023 - 1 Nov 2023",
},
series: [
{
type: "candlestick",
xKey: "date",
xName: "Date",
lowKey: "low",
highKey: "high",
openKey: "open",
closeKey: "close",
},
],
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
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 Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartOptions,
AnimationModule,
CandlestickSeriesModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CandlestickSeriesModule,
CrosshairModule,
LegendModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ContextMenuModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
data: getData(),
title: {
text: "Dow Jones Industrial Average",
},
subtitle: {
text: "Candlestick Patterns",
},
footnote: {
text: "1 Minute",
},
series: [
{
type: "candlestick",
xKey: "date",
xName: "Time",
lowKey: "low",
highKey: "high",
openKey: "open",
closeKey: "close",
item: {
up: {
fill: "transparent",
stroke: "#2b5c95",
wick: {
strokeWidth: 2,
},
},
down: {
fill: "#5090dc",
stroke: "#2b5c95",
wick: {
strokeWidth: 2,
},
},
},
},
],
axes: {
x: {
type: "ordinal-time",
label: {
format: "%H:%M",
},
},
y: {
type: "number",
position: "right",
label: {
formatter: ({ value }) => Number(value).toLocaleString(),
},
crosshair: {
label: {
format: ",.2f",
},
},
},
},
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
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: '#2b5c95',
wick: {
strokeWidth: 2,
},
},
down: {
fill: '#5090dc',
stroke: '#2b5c95',
wick: {
strokeWidth: 2,
},
},
},
},
],
} Candlestick Chart Examples Copy Link
See more Candlestick Chart examples in the AG Charts Gallery.
API Reference Copy Link
Properties available on the AgCandlestickSeriesOptions interface.
- type required
'candlestick' - Configuration for the Candlestick Series.
- xKey required
DatumKey - xKey as specified on series options.
- openKey required
DatumKey - The key to use to retrieve open values from the data.
- closeKey required
DatumKey - The key to use to retrieve close values from the data.
- highKey required
DatumKey - The key to use to retrieve high values from the data.
- lowKey required
DatumKey - The key to use to retrieve low values from the data.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- itemStyler
Styler - Function used to return formatting for individual columns, based on the given parameters.
- highlight
AgMultiSeriesHighlightOptions - Configuration for highlighting when a series or legend item is hovered over.
- showInMiniChart
boolean - Whether to include the series in the Mini Chart.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- context
ContextDefault - Context object to use in callbacks.
- selection
AgSelectionOptions - Configuration for data selection.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- item
AgCandlestickSeriesItem - Configuration used for the series items.
- id
stringdefault: auto-generated value - 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.
- data
DatumDefault[] - The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
- visible
boolean - Whether to display the series.
- showInLegend
boolean - Whether to include the series in the legend.
- xKeyAxis
stringdefault: 'x' - The key of the x-axis to which this series is bound.
- yKeyAxis
stringdefault: 'y' - The key of the y-axis to which this series is bound.
- xName
string - xName as specified on series options.
- yName
string - yName as specified on series options.
- openName
string - 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.
- closeName
string - 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.
- highName
string - 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.
- lowName
string - 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.
Properties available on the AgCandlestickSeriesOptions interface.
- type required
'candlestick' - Configuration for the Candlestick Series.
- xKey required
DatumKey - xKey as specified on series options.
- openKey required
DatumKey - The key to use to retrieve open values from the data.
- closeKey required
DatumKey - The key to use to retrieve close values from the data.
- highKey required
DatumKey - The key to use to retrieve high values from the data.
- lowKey required
DatumKey - The key to use to retrieve low values from the data.
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- itemStyler
Styler - Function used to return formatting for individual columns, based on the given parameters.
- highlight
AgMultiSeriesHighlightOptions - Configuration for highlighting when a series or legend item is hovered over.
- showInMiniChart
boolean - Whether to include the series in the Mini Chart.
- cursor
string - The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
- context
ContextDefault - Context object to use in callbacks.
- selection
AgSelectionOptions - Configuration for data selection.
- nodeClickRange
InteractionRange - Range from a node that a click triggers the listener.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- item
AgCandlestickSeriesItem - Configuration used for the series items.
- id
stringdefault: auto-generated value - 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.
- data
DatumDefault[] - The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
- visible
boolean - Whether to display the series.
- showInLegend
boolean - Whether to include the series in the legend.
- xKeyAxis
stringdefault: 'x' - The key of the x-axis to which this series is bound.
- yKeyAxis
stringdefault: 'y' - The key of the y-axis to which this series is bound.
- xName
string - xName as specified on series options.
- yName
string - yName as specified on series options.
- openName
string - 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.
- closeName
string - 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.
- highName
string - 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.
- lowName
string - 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.