A Candlestick Series shows open and close data with bars, and high and low data with wicks.
Simple Candlestick Copy Link
import {
AgChartOptions,
AgCharts,
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 options: 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",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
date: new Date("Monday, July 31, 2023"),
open: 4584.82,
high: 4594.22,
low: 4573.14,
close: 4588.96,
volume: 2411537985000,
},
{
date: new Date("Tuesday, August 01, 2023"),
open: 4578.83,
high: 4584.62,
low: 4567.53,
close: 4576.73,
volume: 2172699881000,
},
{
date: new Date("Wednesday, August 02, 2023"),
open: 4550.93,
high: 4550.93,
low: 4505.75,
close: 4513.39,
volume: 2466207896000,
},
{
date: new Date("Thursday, August 03, 2023"),
open: 4494.27,
high: 4519.49,
low: 4485.54,
close: 4501.89,
volume: 2351421483000,
},
{
date: new Date("Friday, August 04, 2023"),
open: 4513.96,
high: 4540.34,
low: 4474.55,
close: 4478.03,
volume: 2386696495000,
},
{
date: new Date("Monday, August 07, 2023"),
open: 4491.58,
high: 4519.84,
low: 4491.15,
close: 4518.44,
volume: 2055431221000,
},
{
date: new Date("Tuesday, August 08, 2023"),
open: 4498.03,
high: 4503.31,
low: 4464.39,
close: 4499.38,
volume: 2172253124000,
},
{
date: new Date("Wednesday, August 09, 2023"),
open: 4501.57,
high: 4502.44,
low: 4461.33,
close: 4467.71,
volume: 2046722089000,
},
{
date: new Date("Thursday, August 10, 2023"),
open: 4487.16,
high: 4527.37,
low: 4457.92,
close: 4468.83,
volume: 2111185396000,
},
{
date: new Date("Friday, August 11, 2023"),
open: 4450.69,
high: 4476.23,
low: 4443.98,
close: 4464.05,
volume: 1850766477000,
},
{
date: new Date("Monday, August 14, 2023"),
open: 4458.13,
high: 4490.33,
low: 4453.44,
close: 4489.72,
volume: 1955913253000,
},
{
date: new Date("Tuesday, August 15, 2023"),
open: 4478.87,
high: 4478.87,
low: 4432.19,
close: 4437.86,
volume: 1977157506000,
},
{
date: new Date("Wednesday, August 16, 2023"),
open: 4433.79,
high: 4449.95,
low: 4403.55,
close: 4404.33,
volume: 2001143711000,
},
{
date: new Date("Thursday, August 17, 2023"),
open: 4416.32,
high: 4421.17,
low: 4364.83,
close: 4370.36,
volume: 2216839469000,
},
{
date: new Date("Friday, August 18, 2023"),
open: 4344.88,
high: 4381.82,
low: 4335.31,
close: 4369.71,
volume: 2157858548000,
},
{
date: new Date("Monday, August 21, 2023"),
open: 4380.28,
high: 4407.55,
low: 4360.3,
close: 4399.77,
volume: 2057592847000,
},
{
date: new Date("Tuesday, August 22, 2023"),
open: 4415.33,
high: 4418.59,
low: 4382.77,
close: 4387.55,
volume: 1905849406000,
},
{
date: new Date("Wednesday, August 23, 2023"),
open: 4396.44,
high: 4443.18,
low: 4396.44,
close: 4436.01,
volume: 2013748142000,
},
{
date: new Date("Thursday, August 24, 2023"),
open: 4455.16,
high: 4458.3,
low: 4375.55,
close: 4376.31,
volume: 2077193771000,
},
{
date: new Date("Friday, August 25, 2023"),
open: 4389.38,
high: 4418.46,
low: 4356.29,
close: 4405.71,
volume: 1959845124000,
},
{
date: new Date("Monday, August 28, 2023"),
open: 4426.03,
high: 4439.56,
low: 4414.98,
close: 4433.31,
volume: 1669881577000,
},
{
date: new Date("Tuesday, August 29, 2023"),
open: 4432.75,
high: 4500.14,
low: 4431.68,
close: 4497.63,
volume: 1936663046000,
},
{
date: new Date("Wednesday, August 30, 2023"),
open: 4500.34,
high: 4521.65,
low: 4493.59,
close: 4514.87,
volume: 1827645178000,
},
{
date: new Date("Thursday, August 31, 2023"),
open: 4517.01,
high: 4532.26,
low: 4507.39,
close: 4507.66,
volume: 2352361081000,
},
{
date: new Date("Friday, September 01, 2023"),
open: 4530.6,
high: 4541.25,
low: 4501.35,
close: 4515.77,
volume: 1958155311000,
},
{
date: new Date("Tuesday, September 05, 2023"),
open: 4510.06,
high: 4514.29,
low: 4496.01,
close: 4496.83,
volume: 2128341430000,
},
{
date: new Date("Wednesday, September 06, 2023"),
open: 4490.35,
high: 4490.35,
low: 4442.38,
close: 4465.48,
volume: 2138052710000,
},
{
date: new Date("Thursday, September 07, 2023"),
open: 4434.55,
high: 4457.81,
low: 4430.46,
close: 4451.14,
volume: 2441134922000,
},
{
date: new Date("Friday, September 08, 2023"),
open: 4451.3,
high: 4473.53,
low: 4448.38,
close: 4457.49,
volume: 2076441612000,
},
{
date: new Date("Monday, September 11, 2023"),
open: 4480.98,
high: 4490.77,
low: 4467.89,
close: 4487.46,
volume: 2165432434000,
},
{
date: new Date("Tuesday, September 12, 2023"),
open: 4473.27,
high: 4487.11,
low: 4456.83,
close: 4461.9,
volume: 2184137855000,
},
{
date: new Date("Wednesday, September 13, 2023"),
open: 4462.65,
high: 4479.39,
low: 4453.52,
close: 4467.44,
volume: 2268926200000,
},
{
date: new Date("Thursday, September 14, 2023"),
open: 4487.78,
high: 4511.99,
low: 4478.69,
close: 4505.1,
volume: 2275484003000,
},
{
date: new Date("Friday, September 15, 2023"),
open: 4497.98,
high: 4497.98,
low: 4447.21,
close: 4450.32,
volume: 4244973105000,
},
{
date: new Date("Monday, September 18, 2023"),
open: 4445.13,
high: 4466.36,
low: 4442.11,
close: 4453.53,
volume: 1932361461000,
},
{
date: new Date("Tuesday, September 19, 2023"),
open: 4445.41,
high: 4449.85,
low: 4416.61,
close: 4443.95,
volume: 2018270144000,
},
{
date: new Date("Wednesday, September 20, 2023"),
open: 4452.81,
high: 4461.03,
low: 4401.38,
close: 4402.2,
volume: 1976745837000,
},
{
date: new Date("Thursday, September 21, 2023"),
open: 4374.36,
high: 4375.7,
low: 4329.17,
close: 4330.0,
volume: 2298552282000,
},
{
date: new Date("Friday, September 22, 2023"),
open: 4341.74,
high: 4357.4,
low: 4316.49,
close: 4320.06,
volume: 2135953365000,
},
{
date: new Date("Monday, September 25, 2023"),
open: 4310.62,
high: 4338.51,
low: 4302.7,
close: 4337.44,
volume: 1858119044000,
},
{
date: new Date("Tuesday, September 26, 2023"),
open: 4312.88,
high: 4313.01,
low: 4265.98,
close: 4273.53,
volume: 2129442202000,
},
{
date: new Date("Wednesday, September 27, 2023"),
open: 4282.63,
high: 4292.07,
low: 4238.63,
close: 4274.51,
volume: 2299297267000,
},
{
date: new Date("Thursday, September 28, 2023"),
open: 4269.65,
high: 4317.27,
low: 4264.38,
close: 4299.7,
volume: 2235764324000,
},
{
date: new Date("Friday, September 29, 2023"),
open: 4328.18,
high: 4333.15,
low: 4274.86,
close: 4288.05,
volume: 2411036284000,
},
{
date: new Date("Monday, October 02, 2023"),
open: 4284.52,
high: 4300.58,
low: 4260.21,
close: 4288.39,
volume: 2419266832000,
},
{
date: new Date("Tuesday, October 03, 2023"),
open: 4269.75,
high: 4281.15,
low: 4216.45,
close: 4229.45,
volume: 2430973527000,
},
{
date: new Date("Wednesday, October 04, 2023"),
open: 4233.83,
high: 4268.5,
low: 4220.48,
close: 4263.75,
volume: 2329779403000,
},
{
date: new Date("Thursday, October 05, 2023"),
open: 4259.31,
high: 4267.13,
low: 4225.91,
close: 4258.19,
volume: 2230253462000,
},
{
date: new Date("Friday, October 06, 2023"),
open: 4234.79,
high: 4324.1,
low: 4219.55,
close: 4308.5,
volume: 2493423103000,
},
{
date: new Date("Monday, October 09, 2023"),
open: 4289.02,
high: 4341.73,
low: 4283.79,
close: 4335.66,
volume: 1991524626000,
},
{
date: new Date("Tuesday, October 10, 2023"),
open: 4339.75,
high: 4385.46,
low: 4339.64,
close: 4358.24,
volume: 2160880932000,
},
{
date: new Date("Wednesday, October 11, 2023"),
open: 4366.59,
high: 4378.64,
low: 4345.34,
close: 4376.95,
volume: 2115648071000,
},
{
date: new Date("Thursday, October 12, 2023"),
open: 4380.94,
high: 4385.85,
low: 4325.43,
close: 4349.61,
volume: 2344769422000,
},
{
date: new Date("Friday, October 13, 2023"),
open: 4360.49,
high: 4377.1,
low: 4311.97,
close: 4327.78,
volume: 2302663368000,
},
{
date: new Date("Monday, October 16, 2023"),
open: 4342.37,
high: 4383.33,
low: 4342.37,
close: 4373.63,
volume: 2124400350000,
},
{
date: new Date("Tuesday, October 17, 2023"),
open: 4345.23,
high: 4393.57,
low: 4337.54,
close: 4373.2,
volume: 2355659575000,
},
{
date: new Date("Wednesday, October 18, 2023"),
open: 4357.35,
high: 4364.2,
low: 4303.84,
close: 4314.6,
volume: 2390659124000,
},
{
date: new Date("Thursday, October 19, 2023"),
open: 4321.36,
high: 4339.54,
low: 4269.69,
close: 4278.0,
volume: 2635705086000,
},
{
date: new Date("Friday, October 20, 2023"),
open: 4273.85,
high: 4276.56,
low: 4223.03,
close: 4224.16,
volume: 2734219191000,
},
{
date: new Date("Monday, October 23, 2023"),
open: 4210.4,
high: 4255.84,
low: 4189.22,
close: 4217.04,
volume: 2454581997000,
},
{
date: new Date("Tuesday, October 24, 2023"),
open: 4235.79,
high: 4259.38,
low: 4219.43,
close: 4247.68,
volume: 2472963274000,
},
{
date: new Date("Wednesday, October 25, 2023"),
open: 4232.42,
high: 4232.42,
low: 4181.42,
close: 4186.77,
volume: 2665565303000,
},
{
date: new Date("Thursday, October 26, 2023"),
open: 4175.99,
high: 4183.6,
low: 4127.9,
close: 4137.23,
volume: 2959734415000,
},
{
date: new Date("Friday, October 27, 2023"),
open: 4152.93,
high: 4156.7,
low: 4103.78,
close: 4117.37,
volume: 2784710672000,
},
{
date: new Date("Monday, October 30, 2023"),
open: 4139.39,
high: 4177.47,
low: 4132.94,
close: 4166.82,
volume: 2600517109000,
},
{
date: new Date("Tuesday, October 31, 2023"),
open: 4171.33,
high: 4195.55,
low: 4153.12,
close: 4193.8,
volume: 2701786725000,
},
{
date: new Date("Wednesday, November 01, 2023"),
open: 4201.27,
high: 4245.64,
low: 4197.74,
close: 4237.86,
volume: 2804876425000,
},
];
}
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 {
AgChartOptions,
AgCharts,
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 options: 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",
},
},
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{
date: new Date("2024-03-21T18:24:00.000Z"),
volume: 1711041240000,
open: 39863.58,
high: 39870.44,
low: 39862.47,
close: 39867.41,
},
{
date: new Date("2024-03-21T18:25:00.000Z"),
volume: 1711041300000,
open: 39867.02,
high: 39868.19,
low: 39863.48,
close: 39863.65,
},
{
date: new Date("2024-03-21T18:26:00.000Z"),
volume: 1711041360000,
open: 39864.35,
high: 39865.24,
low: 39858.74,
close: 39858.85,
},
{
date: new Date("2024-03-21T18:27:00.000Z"),
volume: 1711041420000,
open: 39858.04,
high: 39865.13,
low: 39858.04,
close: 39861.59,
},
{
date: new Date("2024-03-21T18:28:00.000Z"),
volume: 1711041480000,
open: 39859.33,
high: 39859.33,
low: 39855.74,
close: 39855.93,
},
{
date: new Date("2024-03-21T18:29:00.000Z"),
volume: 1711041540000,
open: 39851.89,
high: 39854.23,
low: 39851.85,
close: 39854.23,
},
{
date: new Date("2024-03-21T18:30:00.000Z"),
volume: 1711041600000,
open: 39853.09,
high: 39853.09,
low: 39844.98,
close: 39845.26,
},
{
date: new Date("2024-03-21T18:31:00.000Z"),
volume: 1711041660000,
open: 39841.15,
high: 39847.25,
low: 39839.9,
close: 39847.25,
},
{
date: new Date("2024-03-21T18:32:00.000Z"),
volume: 1711041720000,
open: 39847.75,
high: 39850.3,
low: 39846.01,
close: 39850.3,
},
{
date: new Date("2024-03-21T18:33:00.000Z"),
volume: 1711041780000,
open: 39849.21,
high: 39849.21,
low: 39842.77,
close: 39842.77,
},
{
date: new Date("2024-03-21T18:34:00.000Z"),
volume: 1711041840000,
open: 39838.3,
high: 39838.3,
low: 39828.7,
close: 39829.22,
},
{
date: new Date("2024-03-21T18:35:00.000Z"),
volume: 1711041900000,
open: 39829.55,
high: 39829.55,
low: 39829.55,
close: 39829.55,
},
{
date: new Date("2024-03-21T18:36:00.000Z"),
volume: 1711041960000,
open: 39831.68,
high: 39831.68,
low: 39826.62,
close: 39826.62,
},
{
date: new Date("2024-03-21T18:37:00.000Z"),
volume: 1711042020000,
open: 39827.69,
high: 39832.95,
low: 39827.69,
close: 39829.31,
},
{
date: new Date("2024-03-21T18:38:00.000Z"),
volume: 1711042080000,
open: 39828.53,
high: 39832.68,
low: 39823.05,
close: 39832.68,
},
{
date: new Date("2024-03-21T18:39:00.000Z"),
volume: 1711042140000,
open: 39833.53,
high: 39834.54,
low: 39829.58,
close: 39829.68,
},
{
date: new Date("2024-03-21T18:40:00.000Z"),
volume: 1711042200000,
open: 39828.04,
high: 39829.34,
low: 39825.69,
close: 39827.32,
},
{
date: new Date("2024-03-21T18:41:00.000Z"),
volume: 1711042260000,
open: 39827.96,
high: 39828.99,
low: 39819.97,
close: 39819.97,
},
{
date: new Date("2024-03-21T18:42:00.000Z"),
volume: 1711042320000,
open: 39817.52,
high: 39825.81,
low: 39817.52,
close: 39823.98,
},
{
date: new Date("2024-03-21T18:43:00.000Z"),
volume: 1711042380000,
open: 39821.88,
high: 39822.98,
low: 39817.52,
close: 39820.22,
},
{
date: new Date("2024-03-21T18:44:00.000Z"),
volume: 1711042440000,
open: 39821.42,
high: 39824.13,
low: 39821.42,
close: 39821.49,
},
{
date: new Date("2024-03-21T18:45:00.000Z"),
volume: 1711042500000,
open: 39821.4,
high: 39821.4,
low: 39815.71,
close: 39817.62,
},
{
date: new Date("2024-03-21T18:46:00.000Z"),
volume: 1711042560000,
open: 39817.86,
high: 39824.6,
low: 39817.48,
close: 39824.6,
},
{
date: new Date("2024-03-21T18:47:00.000Z"),
volume: 1711042620000,
open: 39824.88,
high: 39828.78,
low: 39821.66,
close: 39828.78,
},
{
date: new Date("2024-03-21T18:48:00.000Z"),
volume: 1711042680000,
open: 39829.22,
high: 39829.78,
low: 39822.64,
close: 39822.64,
},
{
date: new Date("2024-03-21T18:49:00.000Z"),
volume: 1711042740000,
open: 39822.16,
high: 39825.81,
low: 39822.06,
close: 39825.81,
},
{
date: new Date("2024-03-21T18:50:00.000Z"),
volume: 1711042800000,
open: 39828.12,
high: 39831.04,
low: 39828,
close: 39828.55,
},
{
date: new Date("2024-03-21T18:51:00.000Z"),
volume: 1711042860000,
open: 39830.12,
high: 39830.6,
low: 39825.13,
close: 39825.13,
},
{
date: new Date("2024-03-21T18:52:00.000Z"),
volume: 1711042920000,
open: 39825.67,
high: 39829.1,
low: 39823.67,
close: 39825.9,
},
{
date: new Date("2024-03-21T18:53:00.000Z"),
volume: 1711042980000,
open: 39825.5,
high: 39834.47,
low: 39825.5,
close: 39834.47,
},
{
date: new Date("2024-03-21T18:54:00.000Z"),
volume: 1711043040000,
open: 39836.13,
high: 39837.39,
low: 39832.39,
close: 39837.39,
},
{
date: new Date("2024-03-21T18:55:00.000Z"),
volume: 1711043100000,
open: 39838.38,
high: 39838.38,
low: 39831.4,
close: 39833.44,
},
{
date: new Date("2024-03-21T18:56:00.000Z"),
volume: 1711043160000,
open: 39832.39,
high: 39832.39,
low: 39826.3,
close: 39828.56,
},
{
date: new Date("2024-03-21T18:57:00.000Z"),
volume: 1711043220000,
open: 39828.3,
high: 39830.1,
low: 39822.64,
close: 39823.19,
},
{
date: new Date("2024-03-21T18:58:00.000Z"),
volume: 1711043280000,
open: 39824.52,
high: 39826.63,
low: 39818.9,
close: 39818.9,
},
{
date: new Date("2024-03-21T18:59:00.000Z"),
volume: 1711043340000,
open: 39820.9,
high: 39824.11,
low: 39819.72,
close: 39823.18,
},
{
date: new Date("2024-03-21T19:00:00.000Z"),
volume: 1711043400000,
open: 39823.85,
high: 39828.46,
low: 39823.85,
close: 39828.21,
},
{
date: new Date("2024-03-21T19:01:00.000Z"),
volume: 1711043460000,
open: 39827.68,
high: 39830.59,
low: 39827.68,
close: 39830.1,
},
{
date: new Date("2024-03-21T19:02:00.000Z"),
volume: 1711043520000,
open: 39830.63,
high: 39834.28,
low: 39829.71,
close: 39829.71,
},
{
date: new Date("2024-03-21T19:03:00.000Z"),
volume: 1711043580000,
open: 39827.14,
high: 39827.31,
low: 39816.49,
close: 39816.49,
},
{
date: new Date("2024-03-21T19:04:00.000Z"),
volume: 1711043640000,
open: 39817.52,
high: 39817.52,
low: 39810.94,
close: 39811.84,
},
{
date: new Date("2024-03-21T19:05:00.000Z"),
volume: 1711043700000,
open: 39813.32,
high: 39817.11,
low: 39812.82,
close: 39816.44,
},
{
date: new Date("2024-03-21T19:06:00.000Z"),
volume: 1711043760000,
open: 39813.03,
high: 39817.34,
low: 39811.39,
close: 39816.15,
},
{
date: new Date("2024-03-21T19:07:00.000Z"),
volume: 1711043820000,
open: 39815.04,
high: 39820.99,
low: 39813.98,
close: 39816.66,
},
{
date: new Date("2024-03-21T19:08:00.000Z"),
volume: 1711043880000,
open: 39816.36,
high: 39816.36,
low: 39810.55,
close: 39812.57,
},
{
date: new Date("2024-03-21T19:09:00.000Z"),
volume: 1711043940000,
open: 39812.98,
high: 39819.43,
low: 39812.65,
close: 39819.43,
},
{
date: new Date("2024-03-21T19:10:00.000Z"),
volume: 1711044000000,
open: 39819.2,
high: 39826.03,
low: 39817.89,
close: 39826.03,
},
{
date: new Date("2024-03-21T19:11:00.000Z"),
volume: 1711044060000,
open: 39826.19,
high: 39829.06,
low: 39824.82,
close: 39827.21,
},
{
date: new Date("2024-03-21T19:12:00.000Z"),
volume: 1711044120000,
open: 39823.98,
high: 39828.95,
low: 39820.27,
close: 39828.95,
},
{
date: new Date("2024-03-21T19:13:00.000Z"),
volume: 1711044180000,
open: 39829.2,
high: 39829.51,
low: 39826.63,
close: 39827.79,
},
{
date: new Date("2024-03-21T19:14:00.000Z"),
volume: 1711044240000,
open: 39827.64,
high: 39833.08,
low: 39827.64,
close: 39832.18,
},
{
date: new Date("2024-03-21T19:15:00.000Z"),
volume: 1711044300000,
open: 39831.95,
high: 39833.68,
low: 39829.5,
close: 39833.68,
},
{
date: new Date("2024-03-21T19:16:00.000Z"),
volume: 1711044360000,
open: 39835.38,
high: 39835.38,
low: 39833.59,
close: 39833.73,
},
{
date: new Date("2024-03-21T19:17:00.000Z"),
volume: 1711044420000,
open: 39834.57,
high: 39835,
low: 39829.16,
close: 39829.35,
},
{
date: new Date("2024-03-21T19:18:00.000Z"),
volume: 1711044480000,
open: 39828.25,
high: 39828.25,
low: 39817.87,
close: 39818.05,
},
{
date: new Date("2024-03-21T19:19:00.000Z"),
volume: 1711044540000,
open: 39816.43,
high: 39823.57,
low: 39815.17,
close: 39816.26,
},
{
date: new Date("2024-03-21T19:20:00.000Z"),
volume: 1711044600000,
open: 39817.57,
high: 39822.8,
low: 39815.79,
close: 39820.7,
},
{
date: new Date("2024-03-21T19:21:00.000Z"),
volume: 1711044660000,
open: 39821.29,
high: 39827.81,
low: 39820.51,
close: 39827.81,
},
{
date: new Date("2024-03-21T19:22:00.000Z"),
volume: 1711044720000,
open: 39825.8,
high: 39831.08,
low: 39822.18,
close: 39828.73,
},
{
date: new Date("2024-03-21T19:23:00.000Z"),
volume: 1711044780000,
open: 39828.91,
high: 39829.61,
low: 39822.32,
close: 39823.74,
},
{
date: new Date("2024-03-21T19:24:00.000Z"),
volume: 1711044840000,
open: 39823.62,
high: 39823.62,
low: 39818.14,
close: 39818.53,
},
{
date: new Date("2024-03-21T19:25:00.000Z"),
volume: 1711044900000,
open: 39817.25,
high: 39820.73,
low: 39816.06,
close: 39818.79,
},
{
date: new Date("2024-03-21T19:26:00.000Z"),
volume: 1711044960000,
open: 39819.62,
high: 39821.82,
low: 39817.54,
close: 39817.54,
},
{
date: new Date("2024-03-21T19:27:00.000Z"),
volume: 1711045020000,
open: 39817.37,
high: 39824.05,
low: 39817.37,
close: 39820.21,
},
{
date: new Date("2024-03-21T19:28:00.000Z"),
volume: 1711045080000,
open: 39822.27,
high: 39823.76,
low: 39819.22,
close: 39823.76,
},
{
date: new Date("2024-03-21T19:29:00.000Z"),
volume: 1711045140000,
open: 39826.99,
high: 39830.62,
low: 39826.95,
close: 39829.89,
},
{
date: new Date("2024-03-21T19:30:00.000Z"),
volume: 1711045200000,
open: 39830.61,
high: 39839.61,
low: 39830.61,
close: 39838.06,
},
{
date: new Date("2024-03-21T19:31:00.000Z"),
volume: 1711045260000,
open: 39836.44,
high: 39843.47,
low: 39835.66,
close: 39842.69,
},
{
date: new Date("2024-03-21T19:32:00.000Z"),
volume: 1711045320000,
open: 39843.12,
high: 39843.12,
low: 39833.49,
close: 39833.49,
},
{
date: new Date("2024-03-21T19:33:00.000Z"),
volume: 1711045380000,
open: 39833.53,
high: 39833.53,
low: 39831.84,
close: 39833.01,
},
];
}
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,
},
},
},
},
],
}