navigator: Object

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

Note:
  • If no data is passed to navigator, it takes data from the first chart of the StockChart.
var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 navigator: {
   .
   .
   height: 100,
   .
   .
 },
 .
 . 
});
stockChart.render();

Simple Navigator Attributes

Applies To Attribute Type Default Options/Examples
navigator enabled Boolean true false, true
navigator height Number Automatically Calculated based on the StockChart 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
Try Editing The Code

Composite Attribute (Object)

Object Attribute Type Default Options/Examples
navigator slider Object
–
–
navigator axisX Object
–
–
navigator axisY Object
–
–
navigator data Object
–
–
 
var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 navigator: {
   slider: {
     minimum: new Date(2018, 04, 22),
     maximum: new Date(2018, 06, 20)
   },
   .
   .
 },
 .
 . 
});
stockChart.render();
Try Editing The Code

  Also See:    

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