Overview – RangeSelector in StockChart

RangeSelector is used to control the range of data being shown in viewport of charts by entering the range manually. It comprises of buttons with pre-defined ranges and Inputfields to enter start and end values of range as text.

• You can also integrate third party libraries like jQuery Datepicker with inputFields as shown here.

Syntax

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeSelector: {
   height: 100,
   .
   .
   buttons: [{
   .
   .
   }],
   inputFields: {
   .
   .
   }
 },
 .
 .
});
stockChart.render();

rangeSelector Object

Below are properties which can be used to customize RangeSelector.

You can set the initially selected range button programmatically using selectedRangeButtonIndex property as shown below.

buttons Array

buttons array is a collection of Range Buttons to be shown inside the Range Selector.

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeSelector: {
   .
   .
   buttons: [
     {
       label: "1Month",
       range: 1,
       rangeType: "month"
     }
   ]
   .
   .
 }
 .
 .
});
stockChart.render();

Below are properties which can be used to customize Range Buttons.

Customizing Range Buttons

You can customize the number of buttons, their range and labels (text) to be shown using the properties listed above. Here is an example:

Styling Range Buttons

There are number of attributes you can set inside buttonStyle object to customize the look and feel of the Range Buttons.

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeSelector: {
   buttonStyle: {
     backgroundColor: "grey",
     .
     .
   },
   .
   .
 },
 .
 .
});
stockChart.render();

Below are the button styling attributes.

Here is an example which shows how to style range buttons using the above properties.

inputFields Object

inputFields allows you to set range of the data to be displayed on all charts. You can also integrate third party libraries like jQuery Datepicker with inputFields as shown here.

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeSelector: {
   inputFields: {
     startValue: new Date(2017, 06, 01),
     endValue: new Date(2017, 09, 01)
   },
   .
 },
 .
 .
});
stockChart.render();

Below are properties which can be used to customize Inputfields.

Setting the Initial Range using Inputfields

You can set the initial range of data by using startValue and endValue of inputFields as shown in below example. Note that slider (inside Navigator) adjusts its range accordingly.

Styling Inputfields

You can style the Inputfields by using style object under inputFields.

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 rangeSelector: {
   inputFields: {
     style: {
       backgroundColor: "#d8d8d8"
     },
     .
     .
   },
   .
   .
 },
 .
 .
});
stockChart.render();

Below are the styling attributes.

Here is an example which shows how to style Inputfields using the properties listed above.