Overview – Navigator in StockChart

Navigator is used to show a preview of the entire range of data. It also allows you to select the range of values to be shown in the viewport of charts.

StockChart Navigator

Syntax

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
navigator: {
  height: 100,
  .
  .
  slider: {
  .
  .
  },
  axisX: {
  .
  .
  }
  axisY: {
  .
  .
  },
  data: [{
  .
  .
  }]
  .
  .
 },
 .
 .
});
stockChart.render();

Navigator Attributes

Below are the properties which can be used to customize navigator.

Applies To Attribute Type Default Options/Examples Remarks
navigator enabled Boolean true false, true
–
navigator height Number Automatically Calculated based on the Stock Chart height 300, 400, 500 …
–
navigator width Number Automatically Calculated based on the Stock Chart width 500, 600, 800 …
–
navigator verticalAlign String “bottom” “top”, “bottom”
–
navigator backgroundColor String null “blue”, “#0000FF”, “rgb(0,0,255)” …
–
navigator animationEnabled Boolean false false, true
–
navigator animationDuration Number 1200 500, 1000, 1500 …
–
navigator dynamicUpdate Boolean true false, true
–

Here is an example that shows how to enable animation in navigator.

Try Editing The Code

slider Object

Slider is the element in Navigator which helps you select the range of values to be shown inside all Charts.

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

Slider Attributes

Below are the properties which can be used to customize the slider.

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

Setting initial Range of Slider

You can set the initial range of slider (and all charts as a result) while rendering StockChart for the first time. You can do so by setting minimum and maximum properties of the slider. Below is an example

Try Editing The Code

Inverting Masked Region

You can invert the masked region of navigator by setting the maskInverted property to true.

Try Editing The Code

  Also See:    

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