rangeSelector: Object

Range Selector lets you control range of data to be shown in viewport of all charts. You can select a range by entering it manually in Inputfields or by selecting a pre-defined range through a Range Button.



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


Simple rangeSelector Attributes

Applies To Attribute Type Default Options/Examples
rangeSelector enabled Boolean true true, false
rangeSelector width Number Automatically calculated based on StockChart width 400, 800, …
rangeSelector height Number Automatically calculated based on StockChart height 50, 100, …
rangeSelector verticalAlign String “top” “top”, “bottom”
rangeSelector label String “Range” “Zoom”, “Range”, etc.
rangeSelector selectedRangeButtonIndex Number none 1, 2, …

Try it Yourself by Editing the Code below.


Composite Attribute (Object)

Object Attribute Type Default Options
rangeSelector buttonStyle Object
rangeSelector buttons Object
rangeSelector inputFields Object

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



Try it Yourself by Editing the Code below.


  Also See:    



If you have any questions, please feel free to ask in our forums.