buttons: Array

buttons array lets you add /remove buttons to the Range Selector. This allows you to customize the number of buttons shown and their range.


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


Simple Buttons Attributes

Applies To Attribute Type Default Options/Examples Remarks
buttons label String Automatically assigned based on the range “1M”, “5M”, …
buttons range Number Auto Calculated based on data 1, 4, …
buttons rangeType String “month” “numeric”, “millisecond”, “second”, “minute”, “hour”, “day”, “week”, “month”, “year”, “ytd”, “all”

You can create custom Range Buttons as shown in the example below.


Try it Yourself by Editing the Code below.


  Also See:    



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