AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

Vue ChartsFinancial Charts - Configuration

Version 14.2.0
Enterprise

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 { createApp } from 'vue';

import 'ag-charts-enterprise';
import { AgFinancialCharts } from 'ag-charts-vue3';

const ChartExample = {
    template: `
    <ag-financial-charts
      :options="options"
    />
  `,
    components: {
        'ag-financial-charts': AgFinancialCharts,
    },
    data() {
        return {
            options: {
                data: getData(),
            },
        };
    },
};

createApp(ChartExample).mount('#app');

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 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.

Financial Charts use the ag-financial and ag-financial-dark themes.

API Reference Copy Link

Properties available on the AgFinancialChartOptions interface.

theme AgChartTheme | AgChartThemeName
A predefined theme name or an object containing theme overrides. See: [Themes Reference](/themes-api/)
data DatumDefault[]
The data to render the chart from. If this is not specified, it must be set on individual series instead.
dataIdKey DatumKey
The key of the property on each datum that contains its unique identifier. When specified, transactions will match items by this field instead of by object reference. The values of this field must be unique across the dataset.
container HTMLElement | null
The element to place the rendered chart into.
initialState AgInitialStateOptions
The initial state of the chart. This must be a serialisable value.
width PixelSize
The width of the chart in pixels.
height PixelSize
The height of the chart in pixels.
minHeight PixelSize default: 300
Sets the minimum height of the chart. Ignored if `height` is specified.
minWidth PixelSize default: 300
Sets the minimum width of the chart. Ignored if `width` is specified.
title AgChartCaptionOptions
Configuration for the title shown at the top of the chart.
dataSource AgDataSourceOptions
Configuration for asynchronously loaded data.
listeners AgBaseChartListeners
A map of event names to event listeners.
formatter FormatterConfiguration
Global formatter configuration.
enableRtl boolean
Set to `true` to render the chart in right-to-left mode. If not specified, the chart will detect the `dir` attribute on the container or its ancestors.
chartType AgPriceVolumeChartType default: 'candlestick'
Series type used for the OHLC data.
dateKey string default: 'date'
The key used to retrieve x-values from the data.
openKey string default: 'open'
The key used to retrieve 'open' values from the data.
highKey string default: 'high'
The key used to retrieve 'high' values from the data.
lowKey string default: 'low'
The key used to retrieve 'low' values from the data.
closeKey string default: 'close'
The key used to retrieve 'close' values from the data.
volumeKey string default: 'volume'
The key used to retrieve 'volume' values from the data.
navigator boolean default: false
Whether to show the Navigator and mini-chart beneath the main chart.
volume boolean default: true
Whether to show the volume series at the bottom of the chart. If set to `false`, no volume data is required.
rangeButtons boolean default: true
Whether to show the range buttons.
statusBar boolean default: true
Whether to show the status bar.
toolbar boolean default: true
Whether the toolbar is enabled.
zoom boolean default: true
Whether Zoom is enabled.
sync boolean default: false
Whether to enable chart synchronization.