React ChartsFinancial Charts - Configuration

Learn how to create Financial Charts with minimal configuration and customisations.

Default Configuration Copy Link

Financial Charts come pre-configured with built-in features – just add your data to produce the chart shown above.

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { AgFinancialCharts } from 'ag-charts-react';
import { AgFinancialChartOptions } from 'ag-charts-enterprise';
import { getData } from './data';
import 'ag-charts-enterprise';

const ChartExample = () => {
    const [options, setOptions] = useState<AgFinancialChartOptions>({
        data: getData(),
    });

    return <AgFinancialCharts options={options as any} />;
};

const root = createRoot(document.getElementById('root')!);
root.render(<ChartExample />);

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 Copy Link

Chart Features Copy Link

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 Copy Link

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 chart type state can be saved, restored and programmatically initialised and modified, using the Chart State API.

The following chart types are supported:

• candlestick, hollow-candlestick, ohlc, line, step-line, hlc, high-low.

Chart Styling Copy Link

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.

API Reference Copy Link