data: Array

Each element in the data array is a dataSeries object. dataSeries is the object where you can define all the dataPoints to be plotted and also control various properties related to rendering – like chart type, color, labels, events, etc.

Certain properties like color, markerSize, etc can be set at both dataSeries and dataPoint level. In those cases, the value set at dataPoint overrides the one provided at the dataSeries level.

You can add more than one dataSeries element to data Array in order have Multi-Series in Navigator. Using “type” property of dataSeries, you can define how it should be rendered – column, line, area, etc. Navigator Chart support all the features mentioned in Charts documentation except for two exceptions – Bar Charts & Charts without an axis like Pie, Funnel, etc are not allowed.

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 navigator: {
   .
   .
   data: [
     {// dataSeries 1
     },
     {// dataSeries 2
     }
   ],
   .
   .
 },
 .
 .
});
stockChart.render();

Composite Attribute (Object):

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 navigator: {
   .
   .
   data: [{
     dataPoints: [
       .
       .
       { x: new Date(2018, 01, 01), y: 4000},
       .
       .
     ]
   }],
   .
   .
 },
 .
 .
});
stockChart.render();

Passing DataSeries to Navigator

Below is an example showing how to pass different dataSeries to navigator.