The Toolbar contains tools that allow users to analyse and annotate the charts.
Chart Type Selection Copy Link
Users can choose the series type used to display the price data.
Available series types are Candlestick, Hollow Candlestick, OHLC, Line, Step Line, HLC and High Low.
Lines Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
AgFinancialChartOptions,
FinancialChartModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([FinancialChartModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgFinancialChartOptions>({
data: getData(),
title: {
text: "Line Drawings",
},
rangeButtons: false,
initialState: {
annotations: [
{
type: "line",
start: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:30:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39859.35027982327,
},
end: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:39:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39836.36176730486,
},
text: {
label: "Trend line",
position: "center",
alignment: "center",
},
extendStart: true,
extendEnd: true,
},
{
type: "parallel-channel",
height: 15.282400589101599,
middle: {
strokeWidth: 1,
lineDash: [6, 5],
},
background: {
fill: "#5090dc",
fillOpacity: 0.2,
},
start: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:45:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39831.539027982326,
},
end: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:59:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39842.30854197349,
},
text: {
label: "Parallel channel",
position: "top",
alignment: "left",
},
extendStart: true,
},
{
type: "disjoint-channel",
startHeight: 29.948914431675803,
endHeight: 12.78416347381426,
start: {
x: {
__type: "date",
value: "Thu Mar 21 2024 19:31:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39843.62007363771,
},
end: {
x: {
__type: "date",
value: "Thu Mar 21 2024 19:22:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39835.032798232695,
},
text: {
label: "Disjoint channel",
position: "top",
alignment: "right",
},
},
{
type: "vertical-line",
value: {
__type: "date",
value: "Thu Mar 21 2024 19:08:00 GMT+0000 (Greenwich Mean Time)",
},
text: {
label: "Vertical line",
position: "top",
alignment: "center",
},
axisLabel: {
enabled: true,
},
},
{
type: "horizontal-line",
value: 39863.48858615611,
text: {
label: "Horizontal line",
position: "center",
alignment: "right",
},
axisLabel: {
enabled: true,
},
strokeWidth: 3,
lineStyle: "dotted",
},
],
},
});
return <AgFinancialCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{
date: new Date("2024-03-21T18:24:00.000Z"),
volume: 4244973105000,
open: 39863.58,
high: 39870.44,
low: 39862.47,
close: 39867.41,
},
{
date: new Date("2024-03-21T18:25:00.000Z"),
volume: 2351421483000,
open: 39867.02,
high: 39868.19,
low: 39863.48,
close: 39863.65,
},
{
date: new Date("2024-03-21T18:26:00.000Z"),
volume: 2386696495000,
open: 39864.35,
high: 39865.24,
low: 39858.74,
close: 39858.85,
},
{
date: new Date("2024-03-21T18:27:00.000Z"),
volume: 2055431221000,
open: 39858.04,
high: 39865.13,
low: 39858.04,
close: 39861.59,
},
{
date: new Date("2024-03-21T18:28:00.000Z"),
volume: 2172253124000,
open: 39859.33,
high: 39859.33,
low: 39855.74,
close: 39855.93,
},
{
date: new Date("2024-03-21T18:29:00.000Z"),
volume: 2046722089000,
open: 39851.89,
high: 39854.23,
low: 39851.85,
close: 39854.23,
},
{
date: new Date("2024-03-21T18:30:00.000Z"),
volume: 2111185396000,
open: 39853.09,
high: 39853.09,
low: 39844.98,
close: 39845.26,
},
{
date: new Date("2024-03-21T18:31:00.000Z"),
volume: 1850766477000,
open: 39841.15,
high: 39847.25,
low: 39839.9,
close: 39847.25,
},
{
date: new Date("2024-03-21T18:32:00.000Z"),
volume: 1955913253000,
open: 39847.75,
high: 39850.3,
low: 39846.01,
close: 39850.3,
},
{
date: new Date("2024-03-21T18:33:00.000Z"),
volume: 1977157506000,
open: 39849.21,
high: 39849.21,
low: 39842.77,
close: 39842.77,
},
{
date: new Date("2024-03-21T18:34:00.000Z"),
volume: 2001143711000,
open: 39838.3,
high: 39838.3,
low: 39828.7,
close: 39829.22,
},
{
date: new Date("2024-03-21T18:35:00.000Z"),
volume: 2216839469000,
open: 39829.55,
high: 39829.55,
low: 39829.55,
close: 39829.55,
},
{
date: new Date("2024-03-21T18:36:00.000Z"),
volume: 2157858548000,
open: 39831.68,
high: 39831.68,
low: 39826.62,
close: 39826.62,
},
{
date: new Date("2024-03-21T18:37:00.000Z"),
volume: 2057592847000,
open: 39827.69,
high: 39832.95,
low: 39827.69,
close: 39829.31,
},
{
date: new Date("2024-03-21T18:38:00.000Z"),
volume: 1905849406000,
open: 39828.53,
high: 39832.68,
low: 39823.05,
close: 39832.68,
},
{
date: new Date("2024-03-21T18:39:00.000Z"),
volume: 2013748142000,
open: 39833.53,
high: 39834.54,
low: 39829.58,
close: 39829.68,
},
{
date: new Date("2024-03-21T18:40:00.000Z"),
volume: 2077193771000,
open: 39828.04,
high: 39829.34,
low: 39825.69,
close: 39827.32,
},
{
date: new Date("2024-03-21T18:41:00.000Z"),
volume: 1959845124000,
open: 39827.96,
high: 39828.99,
low: 39819.97,
close: 39819.97,
},
{
date: new Date("2024-03-21T18:42:00.000Z"),
volume: 1669881577000,
open: 39817.52,
high: 39825.81,
low: 39817.52,
close: 39823.98,
},
{
date: new Date("2024-03-21T18:43:00.000Z"),
volume: 1936663046000,
open: 39821.88,
high: 39822.98,
low: 39817.52,
close: 39820.22,
},
{
date: new Date("2024-03-21T18:44:00.000Z"),
volume: 1827645178000,
open: 39821.42,
high: 39824.13,
low: 39821.42,
close: 39821.49,
},
{
date: new Date("2024-03-21T18:45:00.000Z"),
volume: 2352361081000,
open: 39821.4,
high: 39821.4,
low: 39815.71,
close: 39817.62,
},
{
date: new Date("2024-03-21T18:46:00.000Z"),
volume: 1958155311000,
open: 39817.86,
high: 39824.6,
low: 39817.48,
close: 39824.6,
},
{
date: new Date("2024-03-21T18:47:00.000Z"),
volume: 2128341430000,
open: 39824.88,
high: 39828.78,
low: 39821.66,
close: 39828.78,
},
{
date: new Date("2024-03-21T18:48:00.000Z"),
volume: 2138052710000,
open: 39829.22,
high: 39829.78,
low: 39822.64,
close: 39822.64,
},
{
date: new Date("2024-03-21T18:49:00.000Z"),
volume: 2441134922000,
open: 39822.16,
high: 39825.81,
low: 39822.06,
close: 39825.81,
},
{
date: new Date("2024-03-21T18:50:00.000Z"),
volume: 2076441612000,
open: 39828.12,
high: 39831.04,
low: 39828,
close: 39828.55,
},
{
date: new Date("2024-03-21T18:51:00.000Z"),
volume: 2165432434000,
open: 39830.12,
high: 39830.6,
low: 39825.13,
close: 39825.13,
},
{
date: new Date("2024-03-21T18:52:00.000Z"),
volume: 2184137855000,
open: 39825.67,
high: 39829.1,
low: 39823.67,
close: 39825.9,
},
{
date: new Date("2024-03-21T18:53:00.000Z"),
volume: 2268926200000,
open: 39825.5,
high: 39834.47,
low: 39825.5,
close: 39834.47,
},
{
date: new Date("2024-03-21T18:54:00.000Z"),
volume: 2275484003000,
open: 39836.13,
high: 39837.39,
low: 39832.39,
close: 39837.39,
},
{
date: new Date("2024-03-21T18:55:00.000Z"),
volume: 4244973105000,
open: 39838.38,
high: 39838.38,
low: 39831.4,
close: 39833.44,
},
{
date: new Date("2024-03-21T18:56:00.000Z"),
volume: 1932361461000,
open: 39832.39,
high: 39832.39,
low: 39826.3,
close: 39828.56,
},
{
date: new Date("2024-03-21T18:57:00.000Z"),
volume: 2018270144000,
open: 39828.3,
high: 39830.1,
low: 39822.64,
close: 39823.19,
},
{
date: new Date("2024-03-21T18:58:00.000Z"),
volume: 1976745837000,
open: 39824.52,
high: 39826.63,
low: 39818.9,
close: 39818.9,
},
{
date: new Date("2024-03-21T18:59:00.000Z"),
volume: 2298552282000,
open: 39820.9,
high: 39824.11,
low: 39819.72,
close: 39823.18,
},
{
date: new Date("2024-03-21T19:00:00.000Z"),
volume: 2135953365000,
open: 39823.85,
high: 39828.46,
low: 39823.85,
close: 39828.21,
},
{
date: new Date("2024-03-21T19:01:00.000Z"),
volume: 1858119044000,
open: 39827.68,
high: 39830.59,
low: 39827.68,
close: 39830.1,
},
{
date: new Date("2024-03-21T19:02:00.000Z"),
volume: 2129442202000,
open: 39830.63,
high: 39834.28,
low: 39829.71,
close: 39829.71,
},
{
date: new Date("2024-03-21T19:03:00.000Z"),
volume: 2299297267000,
open: 39827.14,
high: 39827.31,
low: 39816.49,
close: 39816.49,
},
{
date: new Date("2024-03-21T19:04:00.000Z"),
volume: 2235764324000,
open: 39817.52,
high: 39817.52,
low: 39810.94,
close: 39811.84,
},
{
date: new Date("2024-03-21T19:05:00.000Z"),
volume: 2411036284000,
open: 39813.32,
high: 39817.11,
low: 39812.82,
close: 39816.44,
},
{
date: new Date("2024-03-21T19:06:00.000Z"),
volume: 2419266832000,
open: 39813.03,
high: 39817.34,
low: 39808.39,
close: 39816.15,
},
{
date: new Date("2024-03-21T19:07:00.000Z"),
volume: 2430973527000,
open: 39815.04,
high: 39820.99,
low: 39813.98,
close: 39816.66,
},
{
date: new Date("2024-03-21T19:08:00.000Z"),
volume: 2329779403000,
open: 39816.36,
high: 39816.36,
low: 39810.55,
close: 39812.57,
},
{
date: new Date("2024-03-21T19:09:00.000Z"),
volume: 2230253462000,
open: 39812.98,
high: 39819.43,
low: 39812.65,
close: 39819.43,
},
{
date: new Date("2024-03-21T19:10:00.000Z"),
volume: 2493423103000,
open: 39819.2,
high: 39826.03,
low: 39817.89,
close: 39826.03,
},
{
date: new Date("2024-03-21T19:11:00.000Z"),
volume: 1991524626000,
open: 39826.19,
high: 39829.06,
low: 39824.82,
close: 39827.21,
},
{
date: new Date("2024-03-21T19:12:00.000Z"),
volume: 2160880932000,
open: 39823.98,
high: 39828.95,
low: 39820.27,
close: 39828.95,
},
{
date: new Date("2024-03-21T19:13:00.000Z"),
volume: 2115648071000,
open: 39829.2,
high: 39829.51,
low: 39826.63,
close: 39827.79,
},
{
date: new Date("2024-03-21T19:14:00.000Z"),
volume: 2344769422000,
open: 39827.64,
high: 39833.08,
low: 39827.64,
close: 39832.18,
},
{
date: new Date("2024-03-21T19:15:00.000Z"),
volume: 2302663368000,
open: 39831.95,
high: 39833.68,
low: 39829.5,
close: 39833.68,
},
{
date: new Date("2024-03-21T19:16:00.000Z"),
volume: 2124400350000,
open: 39835.38,
high: 39835.38,
low: 39833.59,
close: 39833.73,
},
{
date: new Date("2024-03-21T19:17:00.000Z"),
volume: 2355659575000,
open: 39834.57,
high: 39835,
low: 39829.16,
close: 39829.35,
},
{
date: new Date("2024-03-21T19:18:00.000Z"),
volume: 2390659124000,
open: 39828.25,
high: 39828.25,
low: 39817.87,
close: 39818.05,
},
{
date: new Date("2024-03-21T19:19:00.000Z"),
volume: 2635705086000,
open: 39816.43,
high: 39823.57,
low: 39815.17,
close: 39816.26,
},
{
date: new Date("2024-03-21T19:20:00.000Z"),
volume: 2734219191000,
open: 39817.57,
high: 39822.8,
low: 39815.79,
close: 39820.7,
},
{
date: new Date("2024-03-21T19:21:00.000Z"),
volume: 2454581997000,
open: 39821.29,
high: 39827.81,
low: 39820.51,
close: 39827.81,
},
{
date: new Date("2024-03-21T19:22:00.000Z"),
volume: 2472963274000,
open: 39825.8,
high: 39831.08,
low: 39822.18,
close: 39828.73,
},
{
date: new Date("2024-03-21T19:23:00.000Z"),
volume: 2665565303000,
open: 39828.91,
high: 39829.61,
low: 39822.32,
close: 39823.74,
},
{
date: new Date("2024-03-21T19:24:00.000Z"),
volume: 2959734415000,
open: 39823.62,
high: 39823.62,
low: 39818.14,
close: 39818.53,
},
{
date: new Date("2024-03-21T19:25:00.000Z"),
volume: 2784710672000,
open: 39817.25,
high: 39820.73,
low: 39816.06,
close: 39818.79,
},
{
date: new Date("2024-03-21T19:26:00.000Z"),
volume: 2600517109000,
open: 39819.62,
high: 39821.82,
low: 39817.54,
close: 39817.54,
},
{
date: new Date("2024-03-21T19:27:00.000Z"),
volume: 2701786725000,
open: 39817.37,
high: 39824.05,
low: 39817.37,
close: 39820.21,
},
{
date: new Date("2024-03-21T19:28:00.000Z"),
volume: 2804876425000,
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: 2298552282000,
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: 2472963274000,
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,
},
];
}
Line types available are:
- Trend Line: A single line between two points on the chart.
- Horizontal Line: A horizontal line across the entire chart. There is also an optional label over the axis.
- Vertical Line: A vertical line across the entire chart. There is also an optional label over the axis.
- Parallel Channel: Two parallel lines, with a fill between them and an optional centre line as well.
- Disjoint Channel: Two lines which do not need to be parallel, with a fill between them.
Stroke and fill colours, stroke width and line style are fully customisable by the user.
Line and Channel Labels Copy Link
Users can add labels to their lines using the options available from the 'Settings' button or by double-clicking a line or channel. These options allow styling and positioning the labels.
Extending Lines and Channels Copy Link
Users can extend one or both ends of lines and channels to infinity. This is done using the options available from the 'Settings' button or by double-clicking a line or channel.
Annotations Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
AgFinancialChartOptions,
FinancialChartModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([FinancialChartModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgFinancialChartOptions>({
data: getData(),
title: {
text: "Text Annotations",
},
rangeButtons: false,
initialState: {
annotations: [
{
type: "text",
text: "Text",
x: {
__type: "date",
value: "Thu Mar 21 2024 19:21:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39851.06756756757,
},
{
type: "comment",
text: "Comment",
x: {
__type: "date",
value: "Thu Mar 21 2024 19:06:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39844.91891891892,
},
{
type: "callout",
text: "Callout",
start: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:31:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39856.820512820515,
},
end: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:39:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39859.282051282054,
},
},
{
type: "note",
text: "Note",
x: {
__type: "date",
value: "Thu Mar 21 2024 18:54:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39843.28205128205,
},
],
},
});
return <AgFinancialCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{
date: new Date("2024-03-21T18:24:00.000Z"),
volume: 4244973105000,
open: 39863.58,
high: 39870.44,
low: 39862.47,
close: 39867.41,
},
{
date: new Date("2024-03-21T18:25:00.000Z"),
volume: 2351421483000,
open: 39867.02,
high: 39868.19,
low: 39863.48,
close: 39863.65,
},
{
date: new Date("2024-03-21T18:26:00.000Z"),
volume: 2386696495000,
open: 39864.35,
high: 39865.24,
low: 39858.74,
close: 39858.85,
},
{
date: new Date("2024-03-21T18:27:00.000Z"),
volume: 2055431221000,
open: 39858.04,
high: 39865.13,
low: 39858.04,
close: 39861.59,
},
{
date: new Date("2024-03-21T18:28:00.000Z"),
volume: 2172253124000,
open: 39859.33,
high: 39859.33,
low: 39855.74,
close: 39855.93,
},
{
date: new Date("2024-03-21T18:29:00.000Z"),
volume: 2046722089000,
open: 39851.89,
high: 39854.23,
low: 39851.85,
close: 39854.23,
},
{
date: new Date("2024-03-21T18:30:00.000Z"),
volume: 2111185396000,
open: 39853.09,
high: 39853.09,
low: 39844.98,
close: 39845.26,
},
{
date: new Date("2024-03-21T18:31:00.000Z"),
volume: 1850766477000,
open: 39841.15,
high: 39847.25,
low: 39839.9,
close: 39847.25,
},
{
date: new Date("2024-03-21T18:32:00.000Z"),
volume: 1955913253000,
open: 39847.75,
high: 39850.3,
low: 39846.01,
close: 39850.3,
},
{
date: new Date("2024-03-21T18:33:00.000Z"),
volume: 1977157506000,
open: 39849.21,
high: 39849.21,
low: 39842.77,
close: 39842.77,
},
{
date: new Date("2024-03-21T18:34:00.000Z"),
volume: 2001143711000,
open: 39838.3,
high: 39838.3,
low: 39828.7,
close: 39829.22,
},
{
date: new Date("2024-03-21T18:35:00.000Z"),
volume: 2216839469000,
open: 39829.55,
high: 39829.55,
low: 39829.55,
close: 39829.55,
},
{
date: new Date("2024-03-21T18:36:00.000Z"),
volume: 2157858548000,
open: 39831.68,
high: 39831.68,
low: 39826.62,
close: 39826.62,
},
{
date: new Date("2024-03-21T18:37:00.000Z"),
volume: 2057592847000,
open: 39827.69,
high: 39832.95,
low: 39827.69,
close: 39829.31,
},
{
date: new Date("2024-03-21T18:38:00.000Z"),
volume: 1905849406000,
open: 39828.53,
high: 39832.68,
low: 39823.05,
close: 39832.68,
},
{
date: new Date("2024-03-21T18:39:00.000Z"),
volume: 2013748142000,
open: 39833.53,
high: 39834.54,
low: 39829.58,
close: 39829.68,
},
{
date: new Date("2024-03-21T18:40:00.000Z"),
volume: 2077193771000,
open: 39828.04,
high: 39829.34,
low: 39825.69,
close: 39827.32,
},
{
date: new Date("2024-03-21T18:41:00.000Z"),
volume: 1959845124000,
open: 39827.96,
high: 39828.99,
low: 39819.97,
close: 39819.97,
},
{
date: new Date("2024-03-21T18:42:00.000Z"),
volume: 1669881577000,
open: 39817.52,
high: 39825.81,
low: 39817.52,
close: 39823.98,
},
{
date: new Date("2024-03-21T18:43:00.000Z"),
volume: 1936663046000,
open: 39821.88,
high: 39822.98,
low: 39817.52,
close: 39820.22,
},
{
date: new Date("2024-03-21T18:44:00.000Z"),
volume: 1827645178000,
open: 39821.42,
high: 39824.13,
low: 39821.42,
close: 39821.49,
},
{
date: new Date("2024-03-21T18:45:00.000Z"),
volume: 2352361081000,
open: 39821.4,
high: 39821.4,
low: 39815.71,
close: 39817.62,
},
{
date: new Date("2024-03-21T18:46:00.000Z"),
volume: 1958155311000,
open: 39817.86,
high: 39824.6,
low: 39817.48,
close: 39824.6,
},
{
date: new Date("2024-03-21T18:47:00.000Z"),
volume: 2128341430000,
open: 39824.88,
high: 39828.78,
low: 39821.66,
close: 39828.78,
},
{
date: new Date("2024-03-21T18:48:00.000Z"),
volume: 2138052710000,
open: 39829.22,
high: 39829.78,
low: 39822.64,
close: 39822.64,
},
{
date: new Date("2024-03-21T18:49:00.000Z"),
volume: 2441134922000,
open: 39822.16,
high: 39825.81,
low: 39822.06,
close: 39825.81,
},
{
date: new Date("2024-03-21T18:50:00.000Z"),
volume: 2076441612000,
open: 39828.12,
high: 39831.04,
low: 39828,
close: 39828.55,
},
{
date: new Date("2024-03-21T18:51:00.000Z"),
volume: 2165432434000,
open: 39830.12,
high: 39830.6,
low: 39825.13,
close: 39825.13,
},
{
date: new Date("2024-03-21T18:52:00.000Z"),
volume: 2184137855000,
open: 39825.67,
high: 39829.1,
low: 39823.67,
close: 39825.9,
},
{
date: new Date("2024-03-21T18:53:00.000Z"),
volume: 2268926200000,
open: 39825.5,
high: 39834.47,
low: 39825.5,
close: 39834.47,
},
{
date: new Date("2024-03-21T18:54:00.000Z"),
volume: 2275484003000,
open: 39836.13,
high: 39837.39,
low: 39832.39,
close: 39837.39,
},
{
date: new Date("2024-03-21T18:55:00.000Z"),
volume: 4244973105000,
open: 39838.38,
high: 39838.38,
low: 39831.4,
close: 39833.44,
},
{
date: new Date("2024-03-21T18:56:00.000Z"),
volume: 1932361461000,
open: 39832.39,
high: 39832.39,
low: 39826.3,
close: 39828.56,
},
{
date: new Date("2024-03-21T18:57:00.000Z"),
volume: 2018270144000,
open: 39828.3,
high: 39830.1,
low: 39822.64,
close: 39823.19,
},
{
date: new Date("2024-03-21T18:58:00.000Z"),
volume: 1976745837000,
open: 39824.52,
high: 39826.63,
low: 39818.9,
close: 39818.9,
},
{
date: new Date("2024-03-21T18:59:00.000Z"),
volume: 2298552282000,
open: 39820.9,
high: 39824.11,
low: 39819.72,
close: 39823.18,
},
{
date: new Date("2024-03-21T19:00:00.000Z"),
volume: 2135953365000,
open: 39823.85,
high: 39828.46,
low: 39823.85,
close: 39828.21,
},
{
date: new Date("2024-03-21T19:01:00.000Z"),
volume: 1858119044000,
open: 39827.68,
high: 39830.59,
low: 39827.68,
close: 39830.1,
},
{
date: new Date("2024-03-21T19:02:00.000Z"),
volume: 2129442202000,
open: 39830.63,
high: 39834.28,
low: 39829.71,
close: 39829.71,
},
{
date: new Date("2024-03-21T19:03:00.000Z"),
volume: 2299297267000,
open: 39827.14,
high: 39827.31,
low: 39816.49,
close: 39816.49,
},
{
date: new Date("2024-03-21T19:04:00.000Z"),
volume: 2235764324000,
open: 39817.52,
high: 39817.52,
low: 39810.94,
close: 39811.84,
},
{
date: new Date("2024-03-21T19:05:00.000Z"),
volume: 2411036284000,
open: 39813.32,
high: 39817.11,
low: 39812.82,
close: 39816.44,
},
{
date: new Date("2024-03-21T19:06:00.000Z"),
volume: 2419266832000,
open: 39813.03,
high: 39817.34,
low: 39808.39,
close: 39816.15,
},
{
date: new Date("2024-03-21T19:07:00.000Z"),
volume: 2430973527000,
open: 39815.04,
high: 39820.99,
low: 39813.98,
close: 39816.66,
},
{
date: new Date("2024-03-21T19:08:00.000Z"),
volume: 2329779403000,
open: 39816.36,
high: 39816.36,
low: 39810.55,
close: 39812.57,
},
{
date: new Date("2024-03-21T19:09:00.000Z"),
volume: 2230253462000,
open: 39812.98,
high: 39819.43,
low: 39812.65,
close: 39819.43,
},
{
date: new Date("2024-03-21T19:10:00.000Z"),
volume: 2493423103000,
open: 39819.2,
high: 39826.03,
low: 39817.89,
close: 39826.03,
},
{
date: new Date("2024-03-21T19:11:00.000Z"),
volume: 1991524626000,
open: 39826.19,
high: 39829.06,
low: 39824.82,
close: 39827.21,
},
{
date: new Date("2024-03-21T19:12:00.000Z"),
volume: 2160880932000,
open: 39823.98,
high: 39828.95,
low: 39820.27,
close: 39828.95,
},
{
date: new Date("2024-03-21T19:13:00.000Z"),
volume: 2115648071000,
open: 39829.2,
high: 39829.51,
low: 39826.63,
close: 39827.79,
},
{
date: new Date("2024-03-21T19:14:00.000Z"),
volume: 2344769422000,
open: 39827.64,
high: 39833.08,
low: 39827.64,
close: 39832.18,
},
{
date: new Date("2024-03-21T19:15:00.000Z"),
volume: 2302663368000,
open: 39831.95,
high: 39833.68,
low: 39829.5,
close: 39833.68,
},
{
date: new Date("2024-03-21T19:16:00.000Z"),
volume: 2124400350000,
open: 39835.38,
high: 39835.38,
low: 39833.59,
close: 39833.73,
},
{
date: new Date("2024-03-21T19:17:00.000Z"),
volume: 2355659575000,
open: 39834.57,
high: 39835,
low: 39829.16,
close: 39829.35,
},
{
date: new Date("2024-03-21T19:18:00.000Z"),
volume: 2390659124000,
open: 39828.25,
high: 39828.25,
low: 39817.87,
close: 39818.05,
},
{
date: new Date("2024-03-21T19:19:00.000Z"),
volume: 2635705086000,
open: 39816.43,
high: 39823.57,
low: 39815.17,
close: 39816.26,
},
{
date: new Date("2024-03-21T19:20:00.000Z"),
volume: 2734219191000,
open: 39817.57,
high: 39822.8,
low: 39815.79,
close: 39820.7,
},
{
date: new Date("2024-03-21T19:21:00.000Z"),
volume: 2454581997000,
open: 39821.29,
high: 39827.81,
low: 39820.51,
close: 39827.81,
},
{
date: new Date("2024-03-21T19:22:00.000Z"),
volume: 2472963274000,
open: 39825.8,
high: 39831.08,
low: 39822.18,
close: 39828.73,
},
{
date: new Date("2024-03-21T19:23:00.000Z"),
volume: 2665565303000,
open: 39828.91,
high: 39829.61,
low: 39822.32,
close: 39823.74,
},
{
date: new Date("2024-03-21T19:24:00.000Z"),
volume: 2959734415000,
open: 39823.62,
high: 39823.62,
low: 39818.14,
close: 39818.53,
},
{
date: new Date("2024-03-21T19:25:00.000Z"),
volume: 2784710672000,
open: 39817.25,
high: 39820.73,
low: 39816.06,
close: 39818.79,
},
{
date: new Date("2024-03-21T19:26:00.000Z"),
volume: 2600517109000,
open: 39819.62,
high: 39821.82,
low: 39817.54,
close: 39817.54,
},
{
date: new Date("2024-03-21T19:27:00.000Z"),
volume: 2701786725000,
open: 39817.37,
high: 39824.05,
low: 39817.37,
close: 39820.21,
},
{
date: new Date("2024-03-21T19:28:00.000Z"),
volume: 2804876425000,
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: 2298552282000,
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: 2472963274000,
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,
},
];
}
Annotation types available are:
- Text: Simple text string displayed on the chart.
- Comment: Text within a comment box.
- Callout: Text within a box, with a callout arrow anchored to a specific position on the chart.
- Note: An icon on the chart, with text displayed on hover.
Add a new line within annotations by pressing ⇧ Shift+↵ Enter.
Arrows Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
AgFinancialChartOptions,
FinancialChartModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([FinancialChartModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgFinancialChartOptions>({
data: getData(),
title: {
text: "Arrow Drawings",
},
rangeButtons: false,
initialState: {
annotations: [
{
type: "arrow",
start: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:25:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39870.926928281464,
},
end: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:44:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39827.35453315291,
},
},
{
type: "arrow-up",
x: {
__type: "date",
value: "Thu Mar 21 2024 18:56:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39842.13125845738,
},
{
type: "arrow-down",
x: {
__type: "date",
value: "Thu Mar 21 2024 19:11:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39814.188092016244,
},
],
},
});
return <AgFinancialCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{
date: new Date("2024-03-21T18:24:00.000Z"),
volume: 4244973105000,
open: 39863.58,
high: 39870.44,
low: 39862.47,
close: 39867.41,
},
{
date: new Date("2024-03-21T18:25:00.000Z"),
volume: 2351421483000,
open: 39867.02,
high: 39868.19,
low: 39863.48,
close: 39863.65,
},
{
date: new Date("2024-03-21T18:26:00.000Z"),
volume: 2386696495000,
open: 39864.35,
high: 39865.24,
low: 39858.74,
close: 39858.85,
},
{
date: new Date("2024-03-21T18:27:00.000Z"),
volume: 2055431221000,
open: 39858.04,
high: 39865.13,
low: 39858.04,
close: 39861.59,
},
{
date: new Date("2024-03-21T18:28:00.000Z"),
volume: 2172253124000,
open: 39859.33,
high: 39859.33,
low: 39855.74,
close: 39855.93,
},
{
date: new Date("2024-03-21T18:29:00.000Z"),
volume: 2046722089000,
open: 39851.89,
high: 39854.23,
low: 39851.85,
close: 39854.23,
},
{
date: new Date("2024-03-21T18:30:00.000Z"),
volume: 2111185396000,
open: 39853.09,
high: 39853.09,
low: 39844.98,
close: 39845.26,
},
{
date: new Date("2024-03-21T18:31:00.000Z"),
volume: 1850766477000,
open: 39841.15,
high: 39847.25,
low: 39839.9,
close: 39847.25,
},
{
date: new Date("2024-03-21T18:32:00.000Z"),
volume: 1955913253000,
open: 39847.75,
high: 39850.3,
low: 39846.01,
close: 39850.3,
},
{
date: new Date("2024-03-21T18:33:00.000Z"),
volume: 1977157506000,
open: 39849.21,
high: 39849.21,
low: 39842.77,
close: 39842.77,
},
{
date: new Date("2024-03-21T18:34:00.000Z"),
volume: 2001143711000,
open: 39838.3,
high: 39838.3,
low: 39828.7,
close: 39829.22,
},
{
date: new Date("2024-03-21T18:35:00.000Z"),
volume: 2216839469000,
open: 39829.55,
high: 39829.55,
low: 39829.55,
close: 39829.55,
},
{
date: new Date("2024-03-21T18:36:00.000Z"),
volume: 2157858548000,
open: 39831.68,
high: 39831.68,
low: 39826.62,
close: 39826.62,
},
{
date: new Date("2024-03-21T18:37:00.000Z"),
volume: 2057592847000,
open: 39827.69,
high: 39832.95,
low: 39827.69,
close: 39829.31,
},
{
date: new Date("2024-03-21T18:38:00.000Z"),
volume: 1905849406000,
open: 39828.53,
high: 39832.68,
low: 39823.05,
close: 39832.68,
},
{
date: new Date("2024-03-21T18:39:00.000Z"),
volume: 2013748142000,
open: 39833.53,
high: 39834.54,
low: 39829.58,
close: 39829.68,
},
{
date: new Date("2024-03-21T18:40:00.000Z"),
volume: 2077193771000,
open: 39828.04,
high: 39829.34,
low: 39825.69,
close: 39827.32,
},
{
date: new Date("2024-03-21T18:41:00.000Z"),
volume: 1959845124000,
open: 39827.96,
high: 39828.99,
low: 39819.97,
close: 39819.97,
},
{
date: new Date("2024-03-21T18:42:00.000Z"),
volume: 1669881577000,
open: 39817.52,
high: 39825.81,
low: 39817.52,
close: 39823.98,
},
{
date: new Date("2024-03-21T18:43:00.000Z"),
volume: 1936663046000,
open: 39821.88,
high: 39822.98,
low: 39817.52,
close: 39820.22,
},
{
date: new Date("2024-03-21T18:44:00.000Z"),
volume: 1827645178000,
open: 39821.42,
high: 39824.13,
low: 39821.42,
close: 39821.49,
},
{
date: new Date("2024-03-21T18:45:00.000Z"),
volume: 2352361081000,
open: 39821.4,
high: 39821.4,
low: 39815.71,
close: 39817.62,
},
{
date: new Date("2024-03-21T18:46:00.000Z"),
volume: 1958155311000,
open: 39817.86,
high: 39824.6,
low: 39817.48,
close: 39824.6,
},
{
date: new Date("2024-03-21T18:47:00.000Z"),
volume: 2128341430000,
open: 39824.88,
high: 39828.78,
low: 39821.66,
close: 39828.78,
},
{
date: new Date("2024-03-21T18:48:00.000Z"),
volume: 2138052710000,
open: 39829.22,
high: 39829.78,
low: 39822.64,
close: 39822.64,
},
{
date: new Date("2024-03-21T18:49:00.000Z"),
volume: 2441134922000,
open: 39822.16,
high: 39825.81,
low: 39822.06,
close: 39825.81,
},
{
date: new Date("2024-03-21T18:50:00.000Z"),
volume: 2076441612000,
open: 39828.12,
high: 39831.04,
low: 39828,
close: 39828.55,
},
{
date: new Date("2024-03-21T18:51:00.000Z"),
volume: 2165432434000,
open: 39830.12,
high: 39830.6,
low: 39825.13,
close: 39825.13,
},
{
date: new Date("2024-03-21T18:52:00.000Z"),
volume: 2184137855000,
open: 39825.67,
high: 39829.1,
low: 39823.67,
close: 39825.9,
},
{
date: new Date("2024-03-21T18:53:00.000Z"),
volume: 2268926200000,
open: 39825.5,
high: 39834.47,
low: 39825.5,
close: 39834.47,
},
{
date: new Date("2024-03-21T18:54:00.000Z"),
volume: 2275484003000,
open: 39836.13,
high: 39837.39,
low: 39832.39,
close: 39837.39,
},
{
date: new Date("2024-03-21T18:55:00.000Z"),
volume: 4244973105000,
open: 39838.38,
high: 39838.38,
low: 39831.4,
close: 39833.44,
},
{
date: new Date("2024-03-21T18:56:00.000Z"),
volume: 1932361461000,
open: 39832.39,
high: 39832.39,
low: 39826.3,
close: 39828.56,
},
{
date: new Date("2024-03-21T18:57:00.000Z"),
volume: 2018270144000,
open: 39828.3,
high: 39830.1,
low: 39822.64,
close: 39823.19,
},
{
date: new Date("2024-03-21T18:58:00.000Z"),
volume: 1976745837000,
open: 39824.52,
high: 39826.63,
low: 39818.9,
close: 39818.9,
},
{
date: new Date("2024-03-21T18:59:00.000Z"),
volume: 2298552282000,
open: 39820.9,
high: 39824.11,
low: 39819.72,
close: 39823.18,
},
{
date: new Date("2024-03-21T19:00:00.000Z"),
volume: 2135953365000,
open: 39823.85,
high: 39828.46,
low: 39823.85,
close: 39828.21,
},
{
date: new Date("2024-03-21T19:01:00.000Z"),
volume: 1858119044000,
open: 39827.68,
high: 39830.59,
low: 39827.68,
close: 39830.1,
},
{
date: new Date("2024-03-21T19:02:00.000Z"),
volume: 2129442202000,
open: 39830.63,
high: 39834.28,
low: 39829.71,
close: 39829.71,
},
{
date: new Date("2024-03-21T19:03:00.000Z"),
volume: 2299297267000,
open: 39827.14,
high: 39827.31,
low: 39816.49,
close: 39816.49,
},
{
date: new Date("2024-03-21T19:04:00.000Z"),
volume: 2235764324000,
open: 39817.52,
high: 39817.52,
low: 39810.94,
close: 39811.84,
},
{
date: new Date("2024-03-21T19:05:00.000Z"),
volume: 2411036284000,
open: 39813.32,
high: 39817.11,
low: 39812.82,
close: 39816.44,
},
{
date: new Date("2024-03-21T19:06:00.000Z"),
volume: 2419266832000,
open: 39813.03,
high: 39817.34,
low: 39808.39,
close: 39816.15,
},
{
date: new Date("2024-03-21T19:07:00.000Z"),
volume: 2430973527000,
open: 39815.04,
high: 39820.99,
low: 39813.98,
close: 39816.66,
},
{
date: new Date("2024-03-21T19:08:00.000Z"),
volume: 2329779403000,
open: 39816.36,
high: 39816.36,
low: 39810.55,
close: 39812.57,
},
{
date: new Date("2024-03-21T19:09:00.000Z"),
volume: 2230253462000,
open: 39812.98,
high: 39819.43,
low: 39812.65,
close: 39819.43,
},
{
date: new Date("2024-03-21T19:10:00.000Z"),
volume: 2493423103000,
open: 39819.2,
high: 39826.03,
low: 39817.89,
close: 39826.03,
},
{
date: new Date("2024-03-21T19:11:00.000Z"),
volume: 1991524626000,
open: 39826.19,
high: 39829.06,
low: 39824.82,
close: 39827.21,
},
{
date: new Date("2024-03-21T19:12:00.000Z"),
volume: 2160880932000,
open: 39823.98,
high: 39828.95,
low: 39820.27,
close: 39828.95,
},
{
date: new Date("2024-03-21T19:13:00.000Z"),
volume: 2115648071000,
open: 39829.2,
high: 39829.51,
low: 39826.63,
close: 39827.79,
},
{
date: new Date("2024-03-21T19:14:00.000Z"),
volume: 2344769422000,
open: 39827.64,
high: 39833.08,
low: 39827.64,
close: 39832.18,
},
{
date: new Date("2024-03-21T19:15:00.000Z"),
volume: 2302663368000,
open: 39831.95,
high: 39833.68,
low: 39829.5,
close: 39833.68,
},
{
date: new Date("2024-03-21T19:16:00.000Z"),
volume: 2124400350000,
open: 39835.38,
high: 39835.38,
low: 39833.59,
close: 39833.73,
},
{
date: new Date("2024-03-21T19:17:00.000Z"),
volume: 2355659575000,
open: 39834.57,
high: 39835,
low: 39829.16,
close: 39829.35,
},
{
date: new Date("2024-03-21T19:18:00.000Z"),
volume: 2390659124000,
open: 39828.25,
high: 39828.25,
low: 39817.87,
close: 39818.05,
},
{
date: new Date("2024-03-21T19:19:00.000Z"),
volume: 2635705086000,
open: 39816.43,
high: 39823.57,
low: 39815.17,
close: 39816.26,
},
{
date: new Date("2024-03-21T19:20:00.000Z"),
volume: 2734219191000,
open: 39817.57,
high: 39822.8,
low: 39815.79,
close: 39820.7,
},
{
date: new Date("2024-03-21T19:21:00.000Z"),
volume: 2454581997000,
open: 39821.29,
high: 39827.81,
low: 39820.51,
close: 39827.81,
},
{
date: new Date("2024-03-21T19:22:00.000Z"),
volume: 2472963274000,
open: 39825.8,
high: 39831.08,
low: 39822.18,
close: 39828.73,
},
{
date: new Date("2024-03-21T19:23:00.000Z"),
volume: 2665565303000,
open: 39828.91,
high: 39829.61,
low: 39822.32,
close: 39823.74,
},
{
date: new Date("2024-03-21T19:24:00.000Z"),
volume: 2959734415000,
open: 39823.62,
high: 39823.62,
low: 39818.14,
close: 39818.53,
},
{
date: new Date("2024-03-21T19:25:00.000Z"),
volume: 2784710672000,
open: 39817.25,
high: 39820.73,
low: 39816.06,
close: 39818.79,
},
{
date: new Date("2024-03-21T19:26:00.000Z"),
volume: 2600517109000,
open: 39819.62,
high: 39821.82,
low: 39817.54,
close: 39817.54,
},
{
date: new Date("2024-03-21T19:27:00.000Z"),
volume: 2701786725000,
open: 39817.37,
high: 39824.05,
low: 39817.37,
close: 39820.21,
},
{
date: new Date("2024-03-21T19:28:00.000Z"),
volume: 2804876425000,
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: 2298552282000,
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: 2472963274000,
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,
},
];
}
Arrow types available are:
- Arrow: An arrow extending between two points on the chart.
- Arrow Up: A fixed size up arrow in a specific position on the chart.
- Arrow Down: A fixed size down arrow in a specific position on the chart.
Fibonacci Tools Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
AgFinancialChartOptions,
FinancialChartModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([FinancialChartModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgFinancialChartOptions>({
data: getData(),
title: {
text: "Fibonacci Tools",
},
rangeButtons: false,
initialState: {
annotations: [
{
type: "fibonacci-retracement",
start: {
x: {
__type: "date",
value: "2024-03-21T19:30:00.000Z",
},
y: 39839.65593310556,
},
end: {
x: {
__type: "date",
value: "2024-03-21T19:12:00.000Z",
},
y: 39830.30360752416,
},
},
{
type: "fibonacci-retracement-trend-based",
endRetracement: {
x: {
__type: "date",
value: "2024-03-21T18:59:00.000Z",
},
y: 39824.246612868774,
},
start: {
x: {
__type: "date",
value: "2024-03-21T18:38:00.000Z",
},
y: 39822.62080641716,
},
end: {
x: {
__type: "date",
value: "2024-03-21T18:47:00.000Z",
},
y: 39830.20790319135,
},
},
],
},
});
return <AgFinancialCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{
date: new Date("2024-03-21T18:24:00.000Z"),
volume: 4244973105000,
open: 39863.58,
high: 39870.44,
low: 39862.47,
close: 39867.41,
},
{
date: new Date("2024-03-21T18:25:00.000Z"),
volume: 2351421483000,
open: 39867.02,
high: 39868.19,
low: 39863.48,
close: 39863.65,
},
{
date: new Date("2024-03-21T18:26:00.000Z"),
volume: 2386696495000,
open: 39864.35,
high: 39865.24,
low: 39858.74,
close: 39858.85,
},
{
date: new Date("2024-03-21T18:27:00.000Z"),
volume: 2055431221000,
open: 39858.04,
high: 39865.13,
low: 39858.04,
close: 39861.59,
},
{
date: new Date("2024-03-21T18:28:00.000Z"),
volume: 2172253124000,
open: 39859.33,
high: 39859.33,
low: 39855.74,
close: 39855.93,
},
{
date: new Date("2024-03-21T18:29:00.000Z"),
volume: 2046722089000,
open: 39851.89,
high: 39854.23,
low: 39851.85,
close: 39854.23,
},
{
date: new Date("2024-03-21T18:30:00.000Z"),
volume: 2111185396000,
open: 39853.09,
high: 39853.09,
low: 39844.98,
close: 39845.26,
},
{
date: new Date("2024-03-21T18:31:00.000Z"),
volume: 1850766477000,
open: 39841.15,
high: 39847.25,
low: 39839.9,
close: 39847.25,
},
{
date: new Date("2024-03-21T18:32:00.000Z"),
volume: 1955913253000,
open: 39847.75,
high: 39850.3,
low: 39846.01,
close: 39850.3,
},
{
date: new Date("2024-03-21T18:33:00.000Z"),
volume: 1977157506000,
open: 39849.21,
high: 39849.21,
low: 39842.77,
close: 39842.77,
},
{
date: new Date("2024-03-21T18:34:00.000Z"),
volume: 2001143711000,
open: 39838.3,
high: 39838.3,
low: 39828.7,
close: 39829.22,
},
{
date: new Date("2024-03-21T18:35:00.000Z"),
volume: 2216839469000,
open: 39829.55,
high: 39829.55,
low: 39829.55,
close: 39829.55,
},
{
date: new Date("2024-03-21T18:36:00.000Z"),
volume: 2157858548000,
open: 39831.68,
high: 39831.68,
low: 39826.62,
close: 39826.62,
},
{
date: new Date("2024-03-21T18:37:00.000Z"),
volume: 2057592847000,
open: 39827.69,
high: 39832.95,
low: 39827.69,
close: 39829.31,
},
{
date: new Date("2024-03-21T18:38:00.000Z"),
volume: 1905849406000,
open: 39828.53,
high: 39832.68,
low: 39823.05,
close: 39832.68,
},
{
date: new Date("2024-03-21T18:39:00.000Z"),
volume: 2013748142000,
open: 39833.53,
high: 39834.54,
low: 39829.58,
close: 39829.68,
},
{
date: new Date("2024-03-21T18:40:00.000Z"),
volume: 2077193771000,
open: 39828.04,
high: 39829.34,
low: 39825.69,
close: 39827.32,
},
{
date: new Date("2024-03-21T18:41:00.000Z"),
volume: 1959845124000,
open: 39827.96,
high: 39828.99,
low: 39819.97,
close: 39819.97,
},
{
date: new Date("2024-03-21T18:42:00.000Z"),
volume: 1669881577000,
open: 39817.52,
high: 39825.81,
low: 39817.52,
close: 39823.98,
},
{
date: new Date("2024-03-21T18:43:00.000Z"),
volume: 1936663046000,
open: 39821.88,
high: 39822.98,
low: 39817.52,
close: 39820.22,
},
{
date: new Date("2024-03-21T18:44:00.000Z"),
volume: 1827645178000,
open: 39821.42,
high: 39824.13,
low: 39821.42,
close: 39821.49,
},
{
date: new Date("2024-03-21T18:45:00.000Z"),
volume: 2352361081000,
open: 39821.4,
high: 39821.4,
low: 39815.71,
close: 39817.62,
},
{
date: new Date("2024-03-21T18:46:00.000Z"),
volume: 1958155311000,
open: 39817.86,
high: 39824.6,
low: 39817.48,
close: 39824.6,
},
{
date: new Date("2024-03-21T18:47:00.000Z"),
volume: 2128341430000,
open: 39824.88,
high: 39828.78,
low: 39821.66,
close: 39828.78,
},
{
date: new Date("2024-03-21T18:48:00.000Z"),
volume: 2138052710000,
open: 39829.22,
high: 39829.78,
low: 39822.64,
close: 39822.64,
},
{
date: new Date("2024-03-21T18:49:00.000Z"),
volume: 2441134922000,
open: 39822.16,
high: 39825.81,
low: 39822.06,
close: 39825.81,
},
{
date: new Date("2024-03-21T18:50:00.000Z"),
volume: 2076441612000,
open: 39828.12,
high: 39831.04,
low: 39828,
close: 39828.55,
},
{
date: new Date("2024-03-21T18:51:00.000Z"),
volume: 2165432434000,
open: 39830.12,
high: 39830.6,
low: 39825.13,
close: 39825.13,
},
{
date: new Date("2024-03-21T18:52:00.000Z"),
volume: 2184137855000,
open: 39825.67,
high: 39829.1,
low: 39823.67,
close: 39825.9,
},
{
date: new Date("2024-03-21T18:53:00.000Z"),
volume: 2268926200000,
open: 39825.5,
high: 39834.47,
low: 39825.5,
close: 39834.47,
},
{
date: new Date("2024-03-21T18:54:00.000Z"),
volume: 2275484003000,
open: 39836.13,
high: 39837.39,
low: 39832.39,
close: 39837.39,
},
{
date: new Date("2024-03-21T18:55:00.000Z"),
volume: 4244973105000,
open: 39838.38,
high: 39838.38,
low: 39831.4,
close: 39833.44,
},
{
date: new Date("2024-03-21T18:56:00.000Z"),
volume: 1932361461000,
open: 39832.39,
high: 39832.39,
low: 39826.3,
close: 39828.56,
},
{
date: new Date("2024-03-21T18:57:00.000Z"),
volume: 2018270144000,
open: 39828.3,
high: 39830.1,
low: 39822.64,
close: 39823.19,
},
{
date: new Date("2024-03-21T18:58:00.000Z"),
volume: 1976745837000,
open: 39824.52,
high: 39826.63,
low: 39818.9,
close: 39818.9,
},
{
date: new Date("2024-03-21T18:59:00.000Z"),
volume: 2298552282000,
open: 39820.9,
high: 39824.11,
low: 39819.72,
close: 39823.18,
},
{
date: new Date("2024-03-21T19:00:00.000Z"),
volume: 2135953365000,
open: 39823.85,
high: 39828.46,
low: 39823.85,
close: 39828.21,
},
{
date: new Date("2024-03-21T19:01:00.000Z"),
volume: 1858119044000,
open: 39827.68,
high: 39830.59,
low: 39827.68,
close: 39830.1,
},
{
date: new Date("2024-03-21T19:02:00.000Z"),
volume: 2129442202000,
open: 39830.63,
high: 39834.28,
low: 39829.71,
close: 39829.71,
},
{
date: new Date("2024-03-21T19:03:00.000Z"),
volume: 2299297267000,
open: 39827.14,
high: 39827.31,
low: 39816.49,
close: 39816.49,
},
{
date: new Date("2024-03-21T19:04:00.000Z"),
volume: 2235764324000,
open: 39817.52,
high: 39817.52,
low: 39810.94,
close: 39811.84,
},
{
date: new Date("2024-03-21T19:05:00.000Z"),
volume: 2411036284000,
open: 39813.32,
high: 39817.11,
low: 39812.82,
close: 39816.44,
},
{
date: new Date("2024-03-21T19:06:00.000Z"),
volume: 2419266832000,
open: 39813.03,
high: 39817.34,
low: 39808.39,
close: 39816.15,
},
{
date: new Date("2024-03-21T19:07:00.000Z"),
volume: 2430973527000,
open: 39815.04,
high: 39820.99,
low: 39813.98,
close: 39816.66,
},
{
date: new Date("2024-03-21T19:08:00.000Z"),
volume: 2329779403000,
open: 39816.36,
high: 39816.36,
low: 39810.55,
close: 39812.57,
},
{
date: new Date("2024-03-21T19:09:00.000Z"),
volume: 2230253462000,
open: 39812.98,
high: 39819.43,
low: 39812.65,
close: 39819.43,
},
{
date: new Date("2024-03-21T19:10:00.000Z"),
volume: 2493423103000,
open: 39819.2,
high: 39826.03,
low: 39817.89,
close: 39826.03,
},
{
date: new Date("2024-03-21T19:11:00.000Z"),
volume: 1991524626000,
open: 39826.19,
high: 39829.06,
low: 39824.82,
close: 39827.21,
},
{
date: new Date("2024-03-21T19:12:00.000Z"),
volume: 2160880932000,
open: 39823.98,
high: 39828.95,
low: 39820.27,
close: 39828.95,
},
{
date: new Date("2024-03-21T19:13:00.000Z"),
volume: 2115648071000,
open: 39829.2,
high: 39829.51,
low: 39826.63,
close: 39827.79,
},
{
date: new Date("2024-03-21T19:14:00.000Z"),
volume: 2344769422000,
open: 39827.64,
high: 39833.08,
low: 39827.64,
close: 39832.18,
},
{
date: new Date("2024-03-21T19:15:00.000Z"),
volume: 2302663368000,
open: 39831.95,
high: 39833.68,
low: 39829.5,
close: 39833.68,
},
{
date: new Date("2024-03-21T19:16:00.000Z"),
volume: 2124400350000,
open: 39835.38,
high: 39835.38,
low: 39833.59,
close: 39833.73,
},
{
date: new Date("2024-03-21T19:17:00.000Z"),
volume: 2355659575000,
open: 39834.57,
high: 39835,
low: 39829.16,
close: 39829.35,
},
{
date: new Date("2024-03-21T19:18:00.000Z"),
volume: 2390659124000,
open: 39828.25,
high: 39828.25,
low: 39817.87,
close: 39818.05,
},
{
date: new Date("2024-03-21T19:19:00.000Z"),
volume: 2635705086000,
open: 39816.43,
high: 39823.57,
low: 39815.17,
close: 39816.26,
},
{
date: new Date("2024-03-21T19:20:00.000Z"),
volume: 2734219191000,
open: 39817.57,
high: 39822.8,
low: 39815.79,
close: 39820.7,
},
{
date: new Date("2024-03-21T19:21:00.000Z"),
volume: 2454581997000,
open: 39821.29,
high: 39827.81,
low: 39820.51,
close: 39827.81,
},
{
date: new Date("2024-03-21T19:22:00.000Z"),
volume: 2472963274000,
open: 39825.8,
high: 39831.08,
low: 39822.18,
close: 39828.73,
},
{
date: new Date("2024-03-21T19:23:00.000Z"),
volume: 2665565303000,
open: 39828.91,
high: 39829.61,
low: 39822.32,
close: 39823.74,
},
{
date: new Date("2024-03-21T19:24:00.000Z"),
volume: 2959734415000,
open: 39823.62,
high: 39823.62,
low: 39818.14,
close: 39818.53,
},
{
date: new Date("2024-03-21T19:25:00.000Z"),
volume: 2784710672000,
open: 39817.25,
high: 39820.73,
low: 39816.06,
close: 39818.79,
},
{
date: new Date("2024-03-21T19:26:00.000Z"),
volume: 2600517109000,
open: 39819.62,
high: 39821.82,
low: 39817.54,
close: 39817.54,
},
{
date: new Date("2024-03-21T19:27:00.000Z"),
volume: 2701786725000,
open: 39817.37,
high: 39824.05,
low: 39817.37,
close: 39820.21,
},
{
date: new Date("2024-03-21T19:28:00.000Z"),
volume: 2804876425000,
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: 2298552282000,
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: 2472963274000,
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,
},
];
}
- Fibonacci Retracement: Multiple Fibonacci bands based on the distance between two points on the chart. Users have the option to choose how many bands to show.
- Fibonacci Trend Based: Multiple Fibonacci bands derived from the proportional relationships between three key points, capturing potential support and resistance zones along the trend. Users have the option to choose how many bands to show.
Measuring Tools Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
AgFinancialChartOptions,
FinancialChartModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([FinancialChartModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgFinancialChartOptions>({
data: getData(),
title: {
text: "Measuring Tools",
},
rangeButtons: false,
initialState: {
annotations: [
{
type: "date-range",
extendBelow: true,
text: {
label: "Date Range",
position: "top",
alignment: "center",
},
start: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:29:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39863.005115089516,
},
end: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:41:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39840.089514066494,
},
},
{
type: "price-range",
text: {
label: "Price Range",
position: "top",
alignment: "right",
},
start: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:57:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39822.54475703325,
},
end: {
x: {
__type: "date",
value: "Thu Mar 21 2024 18:49:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39839.373401534525,
},
},
{
type: "date-price-range",
text: {
label: "Date and Price Range",
position: "center",
alignment: "left",
},
start: {
x: {
__type: "date",
value: "Thu Mar 21 2024 19:02:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39834.62915601023,
},
end: {
x: {
__type: "date",
value: "Thu Mar 21 2024 19:31:00 GMT+0000 (Greenwich Mean Time)",
},
y: 39844.833759590794,
},
},
],
},
});
return <AgFinancialCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{
date: new Date("2024-03-21T18:24:00.000Z"),
volume: 4244973105000,
open: 39863.58,
high: 39870.44,
low: 39862.47,
close: 39867.41,
},
{
date: new Date("2024-03-21T18:25:00.000Z"),
volume: 2351421483000,
open: 39867.02,
high: 39868.19,
low: 39863.48,
close: 39863.65,
},
{
date: new Date("2024-03-21T18:26:00.000Z"),
volume: 2386696495000,
open: 39864.35,
high: 39865.24,
low: 39858.74,
close: 39858.85,
},
{
date: new Date("2024-03-21T18:27:00.000Z"),
volume: 2055431221000,
open: 39858.04,
high: 39865.13,
low: 39858.04,
close: 39861.59,
},
{
date: new Date("2024-03-21T18:28:00.000Z"),
volume: 2172253124000,
open: 39859.33,
high: 39859.33,
low: 39855.74,
close: 39855.93,
},
{
date: new Date("2024-03-21T18:29:00.000Z"),
volume: 2046722089000,
open: 39851.89,
high: 39854.23,
low: 39851.85,
close: 39854.23,
},
{
date: new Date("2024-03-21T18:30:00.000Z"),
volume: 2111185396000,
open: 39853.09,
high: 39853.09,
low: 39844.98,
close: 39845.26,
},
{
date: new Date("2024-03-21T18:31:00.000Z"),
volume: 1850766477000,
open: 39841.15,
high: 39847.25,
low: 39839.9,
close: 39847.25,
},
{
date: new Date("2024-03-21T18:32:00.000Z"),
volume: 1955913253000,
open: 39847.75,
high: 39850.3,
low: 39846.01,
close: 39850.3,
},
{
date: new Date("2024-03-21T18:33:00.000Z"),
volume: 1977157506000,
open: 39849.21,
high: 39849.21,
low: 39842.77,
close: 39842.77,
},
{
date: new Date("2024-03-21T18:34:00.000Z"),
volume: 2001143711000,
open: 39838.3,
high: 39838.3,
low: 39828.7,
close: 39829.22,
},
{
date: new Date("2024-03-21T18:35:00.000Z"),
volume: 2216839469000,
open: 39829.55,
high: 39829.55,
low: 39829.55,
close: 39829.55,
},
{
date: new Date("2024-03-21T18:36:00.000Z"),
volume: 2157858548000,
open: 39831.68,
high: 39831.68,
low: 39826.62,
close: 39826.62,
},
{
date: new Date("2024-03-21T18:37:00.000Z"),
volume: 2057592847000,
open: 39827.69,
high: 39832.95,
low: 39827.69,
close: 39829.31,
},
{
date: new Date("2024-03-21T18:38:00.000Z"),
volume: 1905849406000,
open: 39828.53,
high: 39832.68,
low: 39823.05,
close: 39832.68,
},
{
date: new Date("2024-03-21T18:39:00.000Z"),
volume: 2013748142000,
open: 39833.53,
high: 39834.54,
low: 39829.58,
close: 39829.68,
},
{
date: new Date("2024-03-21T18:40:00.000Z"),
volume: 2077193771000,
open: 39828.04,
high: 39829.34,
low: 39825.69,
close: 39827.32,
},
{
date: new Date("2024-03-21T18:41:00.000Z"),
volume: 1959845124000,
open: 39827.96,
high: 39828.99,
low: 39819.97,
close: 39819.97,
},
{
date: new Date("2024-03-21T18:42:00.000Z"),
volume: 1669881577000,
open: 39817.52,
high: 39825.81,
low: 39817.52,
close: 39823.98,
},
{
date: new Date("2024-03-21T18:43:00.000Z"),
volume: 1936663046000,
open: 39821.88,
high: 39822.98,
low: 39817.52,
close: 39820.22,
},
{
date: new Date("2024-03-21T18:44:00.000Z"),
volume: 1827645178000,
open: 39821.42,
high: 39824.13,
low: 39821.42,
close: 39821.49,
},
{
date: new Date("2024-03-21T18:45:00.000Z"),
volume: 2352361081000,
open: 39821.4,
high: 39821.4,
low: 39815.71,
close: 39817.62,
},
{
date: new Date("2024-03-21T18:46:00.000Z"),
volume: 1958155311000,
open: 39817.86,
high: 39824.6,
low: 39817.48,
close: 39824.6,
},
{
date: new Date("2024-03-21T18:47:00.000Z"),
volume: 2128341430000,
open: 39824.88,
high: 39828.78,
low: 39821.66,
close: 39828.78,
},
{
date: new Date("2024-03-21T18:48:00.000Z"),
volume: 2138052710000,
open: 39829.22,
high: 39829.78,
low: 39822.64,
close: 39822.64,
},
{
date: new Date("2024-03-21T18:49:00.000Z"),
volume: 2441134922000,
open: 39822.16,
high: 39825.81,
low: 39822.06,
close: 39825.81,
},
{
date: new Date("2024-03-21T18:50:00.000Z"),
volume: 2076441612000,
open: 39828.12,
high: 39831.04,
low: 39828,
close: 39828.55,
},
{
date: new Date("2024-03-21T18:51:00.000Z"),
volume: 2165432434000,
open: 39830.12,
high: 39830.6,
low: 39825.13,
close: 39825.13,
},
{
date: new Date("2024-03-21T18:52:00.000Z"),
volume: 2184137855000,
open: 39825.67,
high: 39829.1,
low: 39823.67,
close: 39825.9,
},
{
date: new Date("2024-03-21T18:53:00.000Z"),
volume: 2268926200000,
open: 39825.5,
high: 39834.47,
low: 39825.5,
close: 39834.47,
},
{
date: new Date("2024-03-21T18:54:00.000Z"),
volume: 2275484003000,
open: 39836.13,
high: 39837.39,
low: 39832.39,
close: 39837.39,
},
{
date: new Date("2024-03-21T18:55:00.000Z"),
volume: 4244973105000,
open: 39838.38,
high: 39838.38,
low: 39831.4,
close: 39833.44,
},
{
date: new Date("2024-03-21T18:56:00.000Z"),
volume: 1932361461000,
open: 39832.39,
high: 39832.39,
low: 39826.3,
close: 39828.56,
},
{
date: new Date("2024-03-21T18:57:00.000Z"),
volume: 2018270144000,
open: 39828.3,
high: 39830.1,
low: 39822.64,
close: 39823.19,
},
{
date: new Date("2024-03-21T18:58:00.000Z"),
volume: 1976745837000,
open: 39824.52,
high: 39826.63,
low: 39818.9,
close: 39818.9,
},
{
date: new Date("2024-03-21T18:59:00.000Z"),
volume: 2298552282000,
open: 39820.9,
high: 39824.11,
low: 39819.72,
close: 39823.18,
},
{
date: new Date("2024-03-21T19:00:00.000Z"),
volume: 2135953365000,
open: 39823.85,
high: 39828.46,
low: 39823.85,
close: 39828.21,
},
{
date: new Date("2024-03-21T19:01:00.000Z"),
volume: 1858119044000,
open: 39827.68,
high: 39830.59,
low: 39827.68,
close: 39830.1,
},
{
date: new Date("2024-03-21T19:02:00.000Z"),
volume: 2129442202000,
open: 39830.63,
high: 39834.28,
low: 39829.71,
close: 39829.71,
},
{
date: new Date("2024-03-21T19:03:00.000Z"),
volume: 2299297267000,
open: 39827.14,
high: 39827.31,
low: 39816.49,
close: 39816.49,
},
{
date: new Date("2024-03-21T19:04:00.000Z"),
volume: 2235764324000,
open: 39817.52,
high: 39817.52,
low: 39810.94,
close: 39811.84,
},
{
date: new Date("2024-03-21T19:05:00.000Z"),
volume: 2411036284000,
open: 39813.32,
high: 39817.11,
low: 39812.82,
close: 39816.44,
},
{
date: new Date("2024-03-21T19:06:00.000Z"),
volume: 2419266832000,
open: 39813.03,
high: 39817.34,
low: 39808.39,
close: 39816.15,
},
{
date: new Date("2024-03-21T19:07:00.000Z"),
volume: 2430973527000,
open: 39815.04,
high: 39820.99,
low: 39813.98,
close: 39816.66,
},
{
date: new Date("2024-03-21T19:08:00.000Z"),
volume: 2329779403000,
open: 39816.36,
high: 39816.36,
low: 39810.55,
close: 39812.57,
},
{
date: new Date("2024-03-21T19:09:00.000Z"),
volume: 2230253462000,
open: 39812.98,
high: 39819.43,
low: 39812.65,
close: 39819.43,
},
{
date: new Date("2024-03-21T19:10:00.000Z"),
volume: 2493423103000,
open: 39819.2,
high: 39826.03,
low: 39817.89,
close: 39826.03,
},
{
date: new Date("2024-03-21T19:11:00.000Z"),
volume: 1991524626000,
open: 39826.19,
high: 39829.06,
low: 39824.82,
close: 39827.21,
},
{
date: new Date("2024-03-21T19:12:00.000Z"),
volume: 2160880932000,
open: 39823.98,
high: 39828.95,
low: 39820.27,
close: 39828.95,
},
{
date: new Date("2024-03-21T19:13:00.000Z"),
volume: 2115648071000,
open: 39829.2,
high: 39829.51,
low: 39826.63,
close: 39827.79,
},
{
date: new Date("2024-03-21T19:14:00.000Z"),
volume: 2344769422000,
open: 39827.64,
high: 39833.08,
low: 39827.64,
close: 39832.18,
},
{
date: new Date("2024-03-21T19:15:00.000Z"),
volume: 2302663368000,
open: 39831.95,
high: 39833.68,
low: 39829.5,
close: 39833.68,
},
{
date: new Date("2024-03-21T19:16:00.000Z"),
volume: 2124400350000,
open: 39835.38,
high: 39835.38,
low: 39833.59,
close: 39833.73,
},
{
date: new Date("2024-03-21T19:17:00.000Z"),
volume: 2355659575000,
open: 39834.57,
high: 39835,
low: 39829.16,
close: 39829.35,
},
{
date: new Date("2024-03-21T19:18:00.000Z"),
volume: 2390659124000,
open: 39828.25,
high: 39828.25,
low: 39817.87,
close: 39818.05,
},
{
date: new Date("2024-03-21T19:19:00.000Z"),
volume: 2635705086000,
open: 39816.43,
high: 39823.57,
low: 39815.17,
close: 39816.26,
},
{
date: new Date("2024-03-21T19:20:00.000Z"),
volume: 2734219191000,
open: 39817.57,
high: 39822.8,
low: 39815.79,
close: 39820.7,
},
{
date: new Date("2024-03-21T19:21:00.000Z"),
volume: 2454581997000,
open: 39821.29,
high: 39827.81,
low: 39820.51,
close: 39827.81,
},
{
date: new Date("2024-03-21T19:22:00.000Z"),
volume: 2472963274000,
open: 39825.8,
high: 39831.08,
low: 39822.18,
close: 39828.73,
},
{
date: new Date("2024-03-21T19:23:00.000Z"),
volume: 2665565303000,
open: 39828.91,
high: 39829.61,
low: 39822.32,
close: 39823.74,
},
{
date: new Date("2024-03-21T19:24:00.000Z"),
volume: 2959734415000,
open: 39823.62,
high: 39823.62,
low: 39818.14,
close: 39818.53,
},
{
date: new Date("2024-03-21T19:25:00.000Z"),
volume: 2784710672000,
open: 39817.25,
high: 39820.73,
low: 39816.06,
close: 39818.79,
},
{
date: new Date("2024-03-21T19:26:00.000Z"),
volume: 2600517109000,
open: 39819.62,
high: 39821.82,
low: 39817.54,
close: 39817.54,
},
{
date: new Date("2024-03-21T19:27:00.000Z"),
volume: 2701786725000,
open: 39817.37,
high: 39824.05,
low: 39817.37,
close: 39820.21,
},
{
date: new Date("2024-03-21T19:28:00.000Z"),
volume: 2804876425000,
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: 2298552282000,
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: 2472963274000,
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,
},
];
}
Measuring Tools available are:
- Measure: A quick measuring tool, which measures both the date and price range. This is removed when the user clicks away on the chart.
- Date Range: Measures the time difference and number of bars between two points on the chart. Also shows the sum of the volume between the two points if
volumeis enabled. - Price Range: Measures the price difference between two points on the chart. This is displayed both as an absolute value and as a percentage.
- Date and Price: Combines both the Date and Price Range measures.
Keyboard Shortcuts Copy Link
The following keyboard shortcuts can be used with Financial Charts.
- ^ Ctrl⌘ Command+Z will undo any drawing and annotation actions.
- ^ Ctrl⌘ Command+Y will redo any undo actions.
- ^ Ctrl⌘ Command+C will copy the selected drawing or annotation.
- ^ Ctrl⌘ Command+V will paste the copied drawing or annotation.
- Delete or ⌫ Backspace will delete the selected item.
- Arrow keys (← ↑ → ↓) will move the selected drawing or annotation by 1 pixel.
Use in combination with ^ Ctrl⌘ Command or ⇧ Shift to move by 10 pixels. - Holding down ⇧ Shift whilst creating a drawing or dragging a handle will snap it to the nearest 45° angle.
Save & Restore Copy Link
Drawings and Annotations can be saved, restored and programmatically initialised and modified, using the Chart State API.
Customisation Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
AgFinancialChartOptions,
FinancialChartModule,
ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([FinancialChartModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgFinancialChartOptions>({
data: getData(),
title: {
text: "Customisation",
},
rangeButtons: false,
theme: {
overrides: {
common: {
annotations: {
line: {
stroke: "lime",
strokeWidth: 3,
lineDash: [3, 4],
},
"parallel-channel": {
stroke: "red",
strokeWidth: 4,
background: {
fill: "red",
},
middle: {
strokeOpacity: 0,
},
},
comment: {
fill: "orange",
color: "blue",
stroke: "blue",
strokeWidth: 2,
},
},
},
},
},
initialState: {
annotations: [
{
type: "parallel-channel",
height: 83.55795148247944,
start: {
x: {
__type: "date",
value: "Tue Sep 19 2023 00:00:00 GMT+0100 (British Summer Time)",
},
y: 4401.88679245283,
},
end: {
x: {
__type: "date",
value: "Thu Oct 05 2023 00:00:00 GMT+0100 (British Summer Time)",
},
y: 4279.245283018868,
},
},
{
type: "line",
start: {
x: {
__type: "date",
value: "Tue Sep 05 2023 00:00:00 GMT+0100 (British Summer Time)",
},
y: 4507.681940700809,
},
end: {
x: {
__type: "date",
value: "Fri Oct 13 2023 00:00:00 GMT+0100 (British Summer Time)",
},
y: 4331.805929919137,
},
},
{
type: "comment",
text: "Comment",
visible: true,
x: {
__type: "date",
value: "Tue Aug 22 2023 00:00:00 GMT+0100 (British Summer Time)",
},
y: 4261.725067385445,
},
],
},
});
return <AgFinancialCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
export function getData() {
return [
{
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 customise the look of Drawings and Annotations, use Theme Override Options.
{
theme: {
overrides: {
common: {
annotations: {
line: {
stroke: 'lime',
strokeWidth: 3,
lineDash: [3, 4],
},
'parallel-channel': {
stroke: 'red',
strokeWidth: 4,
background: {
fill: 'red',
},
middle: {
strokeOpacity: 0,
},
},
comment: {
fill: 'orange',
color: 'blue',
strokeWidth: 4,
},
},
},
},
},
}