Angular ChartsFinancial Charts - Range Buttons

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

Range Buttons Copy Link

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.

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