Javascript ChartsFinancial Charts - Configuration


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:

  • xKey : 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).


Chart Types

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
  • range-area

Chart Features

Financial Chart features can be enabled or disabled via the following properties:

const options: AgFinancialChartOptions = {
  // ...
  navigator: false, // disabled by default
  annotations: true,
  rangeToolbar: true,
  volume: true,
  statusBar: true,
  zoom: true,

In this configuration:

  • navigator: Enables the mini chart navigator for easy dataset navigation.
  • annotations: Allows users to add annotations on the chart using the annotations toolbar.
  • rangeToolbar: 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 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.

API Reference