An OHLC Series shows open and close data with horizontal tick lines, and high and low ranges with a vertical line.
Simple OHLC Copy Link
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OhlcSeriesModule,
OrdinalTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
NumberAxisModule,
OhlcSeriesModule,
OrdinalTimeAxisModule,
ContextMenuModule,
]);
const ChartExample = defineComponent({
template: `
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<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: "ohlc",
xKey: "date",
xName: "Date",
lowKey: "low",
highKey: "high",
openKey: "open",
closeKey: "close",
},
],
});
return {
options,
};
},
});
createApp(ChartExample).mount("#app");
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 an OHLC Series, use the ohlc series type.
{
series: [
{
type: 'ohlc',
xKey: 'date',
lowKey: 'low',
openKey: 'open',
closeKey: 'close',
highKey: 'high',
},
],
}In this configuration:
xKeysets the ohlc'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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OhlcSeriesModule,
OrdinalTimeAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
NumberAxisModule,
OhlcSeriesModule,
OrdinalTimeAxisModule,
ContextMenuModule,
]);
const ChartExample = defineComponent({
template: `
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<AgChartOptions>({
data: getData(),
title: {
text: "Dow Jones Industrial Average",
},
subtitle: {
text: "OHLC Patterns",
},
footnote: {
text: "1 Minute",
},
series: [
{
type: "ohlc",
xKey: "date",
xName: "Time",
lowKey: "low",
highKey: "high",
openKey: "open",
closeKey: "close",
item: {
up: {
stroke: "#45ba45",
strokeWidth: 2,
},
down: {
stroke: "#ba4545",
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 {
options,
};
},
});
createApp(ChartExample).mount("#app");
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.
{
series: [
{
type: 'ohlc',
// ...
item: {
up: {
stroke: '#45ba45',
strokeWidth: 2,
},
down: {
stroke: '#ba4545',
strokeWidth: 2,
},
},
},
],
}