slider: Object

Slider is an element in Navigator which allows you to select a range of values to be shown in viewport of charts. Slider comprises of handle, mask and outline.


var  stockChart =  new  CanvasJS.StockChart("container",
{
 .
 .
 navigator: {
   slider: {
     maskColor: "#a0beec"
     .
   },
   .
   .
 },
 .
 .
});
stockChart.render();


Simple Slider Attributes

Applies To Attribute Type Default Options/Examples
slider maskColor String “#d9e8f9” “rgb(100,149,237)”, “#beebe9”, …
slider maskOpacity Number 0.6 0.4, 0.5, …
slider maskInverted Boolean false true, false
slider handleColor String “#EFEFEF” “rgb(105,105,105)”, “#271b1b”, …
slider handleBorderColor String “#3A3A3A” “red”, “yellow” ,”#FF0000″, …
slider handleBorderThickness Number 1 1, 2, 3, …
slider handleWidth Number Automatically Calculated based on the navigator width 10, 20, …
slider handleHeight Number Automatically Calculated based on the navigator height 30, 40, …
slider minimum Number / Date / Timestamp Automatically Calculated based on the data new Date(2018, 03, 12), 120, …
slider maximum Number / Date / Timestamp Automatically Calculated based on the data new Date(2019, 02,03), 250, …
slider outlineColor String “#666666” #dedede”, “black”
slider outlineThickness Number 1 1, 2, …
slider outlineInverted Boolean false true, false


Below is an example which shows how to change the color of mask.


Try it Yourself by Editing the Code below.




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