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” “number”, “millisecond”, “second”, “minute”, “hour”, “day”, “week”, “month”, “year”, “ytd”, “all”
–
Note
  • Range Buttons like “1M”, “3M”, “6M” calculates the range relative to the current end-date of the visible range.

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

Try Editing The Code

  Also See:    

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