React ChartsFinancial Charts - Range Toolbar

The Range Toolbar includes buttons for navigating different time periods.

Range Toolbar

The Range Toolbar contains buttons allowing the user to jump to a specific range along the chart timeline.

The Range Toolbar is enabled by default. To hide the Range Toolbar set the toolbar chart option to false.

Custom Buttons

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

Custom buttons can be defined through the toolbar options object.

toolbar: {
    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