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 Editing The Code

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 Editing The Code

  Also See:    

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