data: Array

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

dataSeries: Object

Each element in the data array is a dataSeries object. dataSeries is the object where user 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 tooltipText, color, 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 to create Multi-Series/Combination charts. Using “type” property of dataSeries, you can define how it should be rendered – column, line, pie, etc.

Whenever you have more than one dataSeries, they all can have same or different chart types, making it a Multi-Series or a Combinational Chart.

Note
  • Pie charts and Doughnut charts cannot be combined with any other chart type. Hence there can only be one dataSeries of type “pie” or “doughnut”.
  • Bar charts can only be combined with other variants of Bar Chart – bar, stackedBar, stackedBar100. 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data:[
  {// dataSeries 1
  },

  {// dataSeries 2
  },
 .

 ],
 .
});
chart.render();

dataSeries Attributes

Applies To Attribute Type Default Options/Examples Remarks
dataSeries name String auto. named “series1”, “data1”..
–
dataSeries type String “column” “line”,”pie”,”area”..etc.
–
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 bevelEnabled Boolean false true,false
Applies to all Bar & Column charts
dataSeries color String From theme “red”,”#1E90FF”..
–
dataSeries lineColor String From color “red”,”#1E90FF”..
–
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 etc
–
dataSeries xValueFormatString String null “##.0#”, “DD-MMM-YYYY” etc
–
dataSeries yValueFormatString String null “##.0#” etc
–
dataSeries zValueFormatString String null “##.0#” etc
z value is used only in Bubble chart
dataSeries percentFormatString String null “##.0#” etc
–
dataSeries startAngle Number 0 25,-45,180..
Applies to onle Pie & Doughnut charts, in Degrees
dataSeries indexLabel String “” “{label}”, “Win”, “x: {x}, y: {y}”
Supports Keyword
dataSeries indexLabelMaxWidth Number Automatically calculated based on the length of indexLabel 2, 10, 40 etc
–
dataSeries indexLabelWrap Boolean true true, false
–
dataSeries indexLabelTextAlign String “left” “left”,”center”, “right”
–
dataSeries indexLabelPlacement String Automatically handled based on chart types “inside”,”outside”
Applies to Bar, Column, Pie And Doughnut
dataSeries indexLabelOrientation String “horizontal” “horizontal”,”vertical”
Applies to all chart types except for pie, doughnut, funnel and pyramid
dataSeries indexLabelBackgroundColor String null “red”,”#1E90FF”..
–
dataSeries indexLabelBorderColor String null “red”,”#FABD76″..
–
dataSeries indexLabelBorderThickness Number 0 1, 3
–
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 toolTipContent String auto. “{y} units”
Supports Keywords
dataSeries lineThickness Number 2 3,4
Applies to pie & doughtnut charts
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 explodeOnClick Boolean true true, false
Applies to Pie, Doughnut, Funnel and Pyramid
dataSeries legendMarkerBorderColor String dataSeries Color “red”,”#1E90FF”..
–
dataSeries legendMarkerBorderThickness Number 0 2, 4 etc
–
dataSeries risingColor String “white” “red”, “#DD7E86” etc
risingColor property can only be used with candle stick chart
dataSeries click Function null function(e) { },
–
dataSeries mouseover Function null function(e) { },
–
dataSeries mouseout Function null function(e) { },
–
dataSeries mousemove Function null function(e) { },
–
dataSeries cursor String “default” “pointer”, “crosshair”, etc Sets cursor type for the dataSeries
dataSeries highlightEnabled Boolean true false, true
–
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  chart =  new CanvasJS.Chart("container",
{
 data:[{
    dataPoints: [
       { x: 10, y: 5}
   ]
 }]
});
chart.render();
If you have any questions, please feel free to ask in our forums.Ask Question

6 Comments

  1. Pingback: Version 1.2 supports Localizing Charts - CanvasJS

  4. sindhu says:

    like suppose in a dropdown if i have pie,bar,spline and when i select any one from dropdown list say,bar the type should be changed to bar and display bar chart.is it possible?if so please help me

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