JavaScript ChartsFinancial Charts - Range Buttons

Version 14.2.0

Range Buttons allow the user to easily navigate to specific time periods and ranges along the chart timeline.

Range controls can also be used with any chart type. See Range Controls for more details.

Range Buttons Copy Link

main.ts

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

ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  title: { text: "Acme Inc." },
  data: getData(),
  volume: false,
  navigator: true,
};

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

const chart = AgCharts.createFinancialChart(options);

The Range Buttons are enabled by default for Financial Charts. To hide them, set the rangeButtons chart option to false.

Custom Buttons Copy Link

It is possible to override the default buttons by providing an array of button objects.

main.ts

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

const MONTH = 30 * 24 * 60 * 60 * 1000;
ModuleRegistry.registerModules([FinancialChartModule]);

const options: AgFinancialChartOptions = {
  title: { text: "Acme Inc." },
  data: getData(),
  volume: false,
  theme: {
    overrides: {
      common: {
        ranges: {
          enabled: true,
          buttons: [
            {
              label: "6 Months",
              value: 6 * MONTH,
            },
            {
              label: "12 Months",
              value: 12 * MONTH,
            },
            {
              label: "February",
              value: [new Date(2023, 1, 1), new Date(2023, 2, 1)],
            },
            {
              label: "All Data",
              value: ({ start, end }) => [start, end],
            },
          ],
        },
      },
    },
  },
};

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

const chart = AgCharts.createFinancialChart(options);

Custom buttons can be defined through the ranges options object.

{
    ranges: {
        enabled: true,
        buttons: [
            {
                label: '6 Months',
                value: 6 * MONTH,
            },
            {
                label: '12 Months',
                value: 12 * MONTH,
            },
            {
                label: 'February',
                value: [new Date(2023, 1, 1), new Date(2023, 2, 1)],
            },
            {
                label: 'All Data',
                value: ({ start, end }) => [start, end],
            },
        ],
    },
}

In this configuration:

label specifies the text displayed on the button.
value determines the time range the button applies:
- For "6 Months" and "12 Months", it sets the range to the past 6 or 12 months, respectively.
- For "February", it sets the range to February 2023, from February 1 to March 1.
- For "All Data", it dynamically sets the range to include all available data from the start to the end date.

API Reference Copy Link

Properties available on the AgRangesOptions interface.

enableOutOfRange boolean default: false: Whether out of range buttons should be enabled.
gap PixelSize default: 0: The gap between each button.
position AgRangesPosition default: 'top-right': The position of the range buttons on the chart.
spacing PixelSize default: 10: The spacing between the range buttons and the series area or axis when positioned at the top or bottom, respectively.
button AgRangesButtonStyles
dropdown AgRangesDropdown
buttons AgRangesButton[]: The buttons to display.
enabled boolean: Whether the associated elements and properties should be used in the chart.
cornerRadius PixelSize
padding Padding: The padding inside the range buttons. A number applies uniform padding; an object sets each side.
textColor CssColor
active AgRangesStateStyles
disabled AgRangesStateStyles
hover AgRangesStateStyles
fill CssColor: The colour for filling shapes.
fillOpacity Opacity: The opacity of the fill colour.
fontSize FontSize: The size of the font in pixels for text elements.
fontFamily FontFamily: The font family for text elements.
fontStyle FontStyle: The style to use for text elements.
fontWeight FontWeight: The font weight to use for text elements.
stroke AgCssColorOrRef: The colour for the stroke.
strokeWidth PixelSize: The width of the stroke in pixels.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

JavaScript ChartsFinancial Charts - Range Buttons

Range Buttons Copy Link

Custom Buttons Copy Link

API Reference Copy Link