#
Range selectorThe range selector is a tool for selecting ranges to display within the chart. It provides buttons to select pre-configured ranges in the chart, like 1 day, 1 week, 1 month, etc. It also provides input boxes where min and max dates can be manually input.
#
Vertical positionThe range selector box can be positioned vertically.
Allowed properties are:
- top (by default)
- middle
- bottom
rangeSelector: {verticalAlign: 'top',x: 0,y: 0},
Use the x and y options to customize position. The x and y options offset the selector by pixels from the given alignment.
#
FloatingThe option allows to skip adding extra space for range selector. See a live demo.
rangeSelector: {floating: true,y: 250},
#
Input position / button positionThe input boxes, which handle the from
and to
dates, can be positioned individually using the following options:
- align (left, center, right)
- x
- y
For example, we can make them swap places like this:
rangeSelector: {inputPosition: {align: 'left',x: 0,y: 0},buttonPosition: {align: 'right',x: 0,y: 0},},
#
Input typeThe option inputDateFormat
is used to determine which type of input to show, datetime-local
, date
or time
and falling back to text
when the browser does not support the input type or the format contains milliseconds. The default setting of %b %e, %Y
for example is going to show a date
input when the browser supports it, while the example below is going to result in a datetime-local
input:
rangeSelector: {inputDateFormat: '%b %e, %Y %H:%M'},
#
ResponsiveBy default the range selector buttons will collapse into a dropdown when there is not enough room to show everything in a single row, this behaviour can be controlled using the dropdown
option. More info on this can be found in the API docs
#
Custom button click eventEach range selector button can get a custom action as shown in this example:
rangeSelector: {buttons: [{type: 'month',count: 1,text: '1m',events: {click: function() {alert('Clicked button');}}}, {type: 'month',count: 3,text: '3m'}, {type: 'month',count: 6,text: '6m'}, {type: 'ytd',text: 'YTD'}, {type: 'year',count: 1,text: '1y'}, {type: 'all',text: 'All'}]},
See the API reference for the rangeSelector option for more information on how to set up the range selector tool.