AG Studio Launch Week šŸš€šŸš€šŸš€ 28 Sep - 2 Oct 2026 šŸš€šŸš€šŸš€ Join now

React ChartsFinancial Charts - Range Buttons

Version 14.2.0
Enterprise

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

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

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.