Range selector

The 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 position

The 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.

Floating

The option allows to skip adding extra space for range selector. See a live demo.

rangeSelector: {
    floating: true,
    y: 250 
},

 

Input position / button position

The 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 type

The 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'
},

Responsive

By 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 event

Each 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.