Learn how to create Financial Charts with minimal configuration and customisations.
Default Configuration
Financial Charts come pre-configured with built-in features – just add your data to produce the chart shown above.
import { AgCharts, AgFinancialChartOptions } from "ag-charts-enterprise";
import { getData } from "./data";
const options: AgFinancialChartOptions = {
container: document.getElementById("myChart"),
data: getData(),
};
const chart = AgCharts.createFinancialChart(options);
This snippet assumes the supplied data includes 'date', 'open', 'high', 'low', 'close' and 'volume' (optional) keys.
For custom data keys, map your data properties to the appropriate AgFinancialChartOptions keys:
dateKey
: key for the date values.openKey
: key for the open values.highKey
: key for the high values.lowKey
: key for the low values.closeKey
: key for the close values.volumeKey
: key for the volume values (optional).
Customisation
Chart Features
Financial Chart features can be enabled or disabled via the following properties:
const options: AgFinancialChartOptions = {
// ...
navigator: false, // disabled by default
toolbar: true,
rangeButtons: true,
volume: true,
statusBar: true,
zoom: true,
};
In this configuration:
navigator
: Enables the mini chart navigator for easy dataset navigation.toolbar
: Shows the Toolbar.rangeButtons
: Provides range buttons for navigating different time periods.volume
: Displays volume data on the chart.statusBar
: Shows a status bar at the top of the chart when hovering over the chart series.zoom
: Enables zoom functionality for detailed analysis of the data.
Chart Types
End users can use the Chart Type Selection Tool to choose a series type for visualising the data. However, this can also be done programmatically.
The default chart type is candlestick
. To use a different chart type, set the chartType
property.
const options: AgFinancialChartOptions = {
// ...
chartType: 'line', // Set to line
};
The following chart types are supported:
candlestick
,hollow-candlestick
,ohlc
,line
,step-line
,hlc
,high-low
.
Chart Styling
Use the theme
property in AgFinancialChartOptions
to customise chart styles.
const options: AgFinancialChartOptions = {
// ...
theme: {
palette: {
up: { fill: "#F3A93C", stroke: "#A8492D" },
down: { fill: "#1A00F4", stroke: "#75FBFD" }
},
},
};
In this configuration:
palette
: Specifies custom colours.up
: Colours for "rising values"down
: Colours for "falling values"
For additional customisation, use Theme Override Options in the theme
option.
Financial Charts use the ag-financial
and ag-financial-dark
themes.