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

  Also See:    

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