---
title: "Financial Charts - Configuration"
enterprise: true
framework: javascript
version: "14.1.0"
---

# Financial Charts - Configuration

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

## Default Configuration

#### Default Configuration

```ts
import {
  AgCharts,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  data: getData(),
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createFinancialChart(options);
```

[Live example: Default Configuration](https://www.ag-grid.com/charts/typescript/financial-charts-configuration/examples/default-configuration)

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

```ts
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);
```

> **Note**
>
> 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](#reference-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

#### Chart Features

```ts
import {
  AgCharts,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  data: getData(),
  navigator: false, // disabled by default!
  toolbar: true,
  rangeButtons: true,
  volume: true,
  statusBar: true,
  zoom: true,
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createFinancialChart(options);

function toggleFeature(
  type:
    | "navigator"
    | "toolbar"
    | "rangeButtons"
    | "volume"
    | "statusBar"
    | "zoom",
) {
  options[type] = !options[type];

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleFeature = toggleFeature;
}
```

[Live example: Chart Features](https://www.ag-grid.com/charts/typescript/financial-charts-configuration/examples/chart-features)

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

```ts
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](https://www.ag-grid.com/charts/javascript/financial-charts-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](https://www.ag-grid.com/charts/javascript/financial-charts-toolbar/#chart-type-selection) 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.

```ts
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](https://www.ag-grid.com/charts/javascript/api-state/).

The following chart types are supported:

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

### Chart Styling

#### Chart Styling

```ts
import {
  AgCharts,
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  theme: {
    palette: {
      up: { fill: "#F3A93C", stroke: "#A8492D" },
      down: { fill: "#1A00F4", stroke: "#75FBFD" },
    },
  },

  data: getData(),
};

options.container = document.getElementById("myChart");

const chart = AgCharts.createFinancialChart(options);
```

[Live example: Chart Styling](https://www.ag-grid.com/charts/typescript/financial-charts-configuration/examples/chart-styling)

Use the `theme` property in `AgFinancialChartOptions` to customise chart styles.

```ts
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](https://www.ag-grid.com/charts/themes-api/) in the `theme` option.

> **Note**
>
> Financial Charts use the `ag-financial` and `ag-financial-dark` themes.

## API Reference

#### Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| 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. |
| initialState.active | AgActiveState |  | The initial picked item. |
| initialState.active.activeItem | AgActiveItemState |  | The active series datum shape. If the entire series is active, then `itemId` will be set to `undefined`. |
| initialState.active.activeItem.type (required) | 'series-node' \| 'legend' |  | Where the item activation originates from. |
| initialState.active.activeItem.seriesId (required) | string |  | The unique identifier of the series that this picked datum belongs to. |
| initialState.active.activeItem.itemId (required) | string \| number |  | The unique identifier of the picked datum. |
| initialState.active.frozen | boolean |  | The frozen state. When the picked item is frozen, user interactions with the chart will be ignored and not updated the currently picked item. |
| initialState.annotations | AgAnnotation[] |  | The initial set of annotations to display on the chart. |
| initialState.chartType | AgInitialStateChartType |  | The initial chart type. |
| initialState.collapsed | Array<string \| number> |  | The initial collapsed datums by id, for Organization Charts. |
| initialState.legend | AgInitialStateLegendOptions[] |  | The initial legend series visibility state. |
| initialState.legend.visible (required) | boolean |  | Whether the legend item is currently enabled or not. |
| initialState.legend.seriesId | string |  | Series or item id |
| initialState.legend.itemId | string |  | Legend item id - usually yKey value for cartesian series. |
| initialState.legend.legendItemName | string |  | Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together. |
| initialState.legendPagination | number |  | The initial legend pagination page as a zero-based index, restored on a best-effort like-for-like basis as the page count depends on the render size. |
| initialState.zoom | AgInitialStateZoomOptions |  | The initial zoom state. |
| initialState.zoom.rangeX | AgInitialStateZoomRange |  | The initial zoom range for the x-axis. |
| initialState.zoom.rangeX.start | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The start value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeX.end | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The end value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeY | AgInitialStateZoomRange |  | The initial zoom range for the y-axis. |
| initialState.zoom.rangeY.start | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The start value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.rangeY.end | AgStateSerializableDate \| AgStateSerializableBigInt \| AgStateSerializableGroupingValueType \| number |  | The end value of the zoom range. A number, or a serialised value object. |
| initialState.zoom.ratioX | AgInitialStateZoomRatio |  | The initial zoom ratio for the x-axis. |
| initialState.zoom.ratioX.start | Ratio |  | The start ratio of the zoom range. |
| initialState.zoom.ratioX.end | Ratio |  | The end ratio of the zoom range. |
| initialState.zoom.ratioY | AgInitialStateZoomRatio |  | The initial zoom ratio for the y-axis. |
| initialState.zoom.ratioY.start | Ratio |  | The start ratio of the zoom range. |
| initialState.zoom.ratioY.end | Ratio |  | The end ratio of the zoom range. |
| initialState.zoom.autoScaledAxes | AgAutoScaledAxes |  | Axes that are zoomed by the auto scaling functionality. |
| width | PixelSize |  | The width of the chart in pixels. |
| height | PixelSize |  | The height of the chart in pixels. |
| minHeight | PixelSize | 300 | Sets the minimum height of the chart. Ignored if `height` is specified. |
| minWidth | PixelSize | 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. |
| title.enabled | boolean |  | Whether the text should be shown. |
| title.text | TextValue \| ContentSegment[] |  | The text to display. Plain text, or an array of segments for rich content. |
| title.textAlign | 'left' \| 'center' \| 'right' |  | Horizontal position of the text. |
| title.fontStyle | FontStyle |  | The font style to use for the text. |
| title.fontWeight | FontWeight |  | The font weight to use for the text. |
| title.fontSize | FontSize |  | The font size in pixels to use for the text. |
| title.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the text. A single family name, or an array of names used as fallbacks. |
| title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the text. A colour string, or a theme-colour reference object. |
| title.spacing | PixelSize |  | Spacing added to help position the text. |
| title.maxWidth | PixelSize |  | Used to constrain the width of the title before text is wrapped or truncated. |
| title.maxHeight | PixelSize |  | Used to constrain the height of the title before text is truncated. |
| title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| title.tooltip | AgCaptionTooltipOptions |  | Configuration for the caption tooltip shown on hover. |
| title.tooltip.visible | 'auto' \| 'always' \| 'never' |  | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled.  Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. |
| title.tooltip.text | string |  | Static text to display in the tooltip. Overrides the default caption text. |
| title.tooltip.renderer | Renderer |  | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`.  Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. |
| title.border | BorderOptions |  | Stroke options for the box border. |
| title.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| title.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| title.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| title.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| title.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| title.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| title.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| title.fillOpacity | Opacity |  | The opacity of the fill colour. |
| dataSource | AgDataSourceOptions |  | Configuration for asynchronously loaded data. |
| dataSource.getData (required) | Function |  | Asynchronous callback to load data into the chart. |
| listeners | AgBaseChartListeners |  | A map of event names to event listeners. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is clicked. Useful for a chart containing multiple series. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is double-clicked. Useful for a chart containing multiple series. |
| listeners.seriesVisibilityChange | Listener |  | The listener to call when a series visibility is changed. |
| listeners.activeChange | Listener |  | The listener to call when the active state (highlight/tooltip) is changed. |
| listeners.selectionChange | Listener |  | The listener to call when data selection is changed |
| listeners.collapsedChange | Listener |  | The listener to call when collapsed items are changed. |
| listeners.click | Listener |  | The listener to call when the chart is clicked. |
| listeners.doubleClick | Listener |  | The listener to call when the chart is double-clicked. |
| listeners.annotations | Listener |  | The listener to call when the annotations are changed. |
| listeners.zoom | Listener |  | The listener to call when the zoom is changed. |
| formatter | FunctionFormatter \| Partial |  | 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 | 'candlestick' \| 'hollow-candlestick' \| 'ohlc' \| 'line' \| 'step-line' \| 'hlc' \| 'high-low' | 'candlestick' | Series type used for the OHLC data. |
| dateKey | string | 'date' | The key used to retrieve x-values from the data. |
| openKey | string | 'open' | The key used to retrieve 'open' values from the data. |
| highKey | string | 'high' | The key used to retrieve 'high' values from the data. |
| lowKey | string | 'low' | The key used to retrieve 'low' values from the data. |
| closeKey | string | 'close' | The key used to retrieve 'close' values from the data. |
| volumeKey | string | 'volume' | The key used to retrieve 'volume' values from the data. |
| navigator | boolean | false | Whether to show the Navigator and mini-chart beneath the main chart. |
| volume | boolean | true | Whether to show the volume series at the bottom of the chart.  If set to `false`, no volume data is required. |
| rangeButtons | boolean | true | Whether to show the range buttons. |
| statusBar | boolean | true | Whether to show the status bar. |
| toolbar | boolean | true | Whether the toolbar is enabled. |
| zoom | boolean | true | Whether Zoom is enabled. |
| sync | boolean | false | Whether to enable chart synchronization. |