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.