data: Array

data is an array of dataSeries Objects. dataSeries is explained in detail below.



Note:
  • If data is not set in navigator, first dataSeries of first chart is automatically assigned.

dataSeries: Object

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();



dataSeries Attributes

Applies To Attribute Type Default Options/Examples Remarks
dataSeries name String auto. named “series1”, “Example1”, …
dataSeries type String “splineArea” “line”, “spline”, “area”, …
dataSeries axisXType String “primary” “primary”,”secondary”
dataSeries axisYType String “primary” “primary”,”secondary”
dataSeries axisXIndex Number 0 1, 2, 3 …
dataSeries axisYIndex Number 0 1, 2, 3, …
dataSeries xValueType String auto “number”,”dateTime”
dataSeries color String “red”, “#003290”, …
dataSeries lineColor String “red”, “#DEDEDE”, …
dataSeries connectNullData Boolean false true, false
dataSeries nullDataLineDashType String “dash” “solid”, “dot”, …
dataSeries visible Boolean true true, false
dataSeries fillOpacity Number .7 for Area Charts and 1 for all other chart types 1, .5, …
dataSeries indexLabel String null “{label}”, “{x}:{y}”, …
Supports Keyword
dataSeries indexLabelMaxWidth Number Automatically calculated based on the length of indexLabel 2, 10, …
dataSeries indexLabelWrap Boolean true true, false
dataSeries indexLabelPlacement String “outside” “inside”,”outside”
dataSeries indexLabelOrientation String “horizontal” “horizontal”, “vertical”
dataSeries indexLabelBackgroundColor String null “red”,”#1E90FF”, …
dataSeries indexLabelFontStyle String “normal” “normal”, “italic”, “oblique”
dataSeries indexLabelFontColor String “grey” “red”,”#1E90FF”, …
dataSeries indexLabelFontSize Number 18 16,20,24, …
dataSeries indexLabelFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “arial”, “calibri”, “tahoma”, …
dataSeries indexLabelFontWeight String “normal” “lighter”, “normal” ,”bold” , “bolder”
dataSeries indexLabelLineColor String “lightgrey” “red”, “#1E90FF”, …
dataSeries indexlabelLineThickness Number 2 2, 4, …
dataSeries lineThickness Number 2 3, 4, …
dataSeries markerType String “circle” “circle”, “square”, “cross”, “triangle”, “line”
Applies to line, area, bubble, scatter charts
dataSeries markerColor String auto. takes dataSeries/dataPoint color “red”, “#1E90FF”, …
Applies to line, area, bubble, scatter charts
dataSeries markerSize Number auto. Zero for area chart 5, 10, …
Applies to line, area, bubble, scatter charts
dataSeries markerBorderColor String marker Color “red”, “#1E90FF”, …
Applies to line, area, bubble, scatter charts
dataSeries markerBorderThickness Number 1 4,6, …
Applies to line, area, bubble, scatter charts
dataSeries ShowInLegend Boolean false true,false
-auto when not set-
dataSeries legendText String “dataSeries1”, “dataSeries2” .. “apples”, “oranges”, …
-auto when not set-
dataSeries legendMarkerType String “circle” “circle”, “square”, “cross”, “triangle”
Applies to line, area, bubble, scatter charts
dataSeries legendMarkerColor String marker Color “red”,”#1E90FF”, …
Applies to line, area, bubble, scatter charts
dataSeries legendMarkerBorderColor String dataSeries Color “red”,”#1E90FF”, …
dataSeries legendMarkerBorderThickness Number 0 2, 4, …
dataSeries risingColor String “white” “red”, “#DD7E86”, …
risingColor property can only be used with candle stick chart
dataSeries lineDashType String “solid” “dot”, “dash”, … Sets the Line Dash Type for all Line and Area Charts.
dataSeries indexLabelLineDashType String “solid” “dot”, “dash”, … Sets the Dash Type for indexLabel’s line.
dataSeries indexLabelFormatter Function null function(e) { }
 

Composite Attribute (Object):

Object Attributes Type Default Options Remarks
dataSeries datapoints 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.




Try it Yourself by Editing the Code below.



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