dataPoints: Array

It represents collection of dataPoints inside dataSeries .

dataPoint: Object

Each value that has to be plotted on the chart is referred to as a dataPoint.

Notes
  • 3 commonly used dataPoint properties that you should remember are x, y and label
  • Some attributes like indexLabel, tooltipContent etc. comes both in dataSeries and dataPoint, in such case values set at dataPoint is given priority over dataSeries. 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data:[
 { //dataSeries
 .
 .
 dataPoints : [ // values go here
  .
  .
  ],
 },


});
chart.render();

dataPoint Attributes

Applies To Attribute Type Default Options/Examples Remarks
dataPoint x number null 10,20,30 .. | new Date(2012, 12, 15)
-auto-
dataPoint y number null 34, 26, 28..
–
dataPoint z number null 240, 300, 400
Applies only to Bubble Charts
dataPoint name string auto. “apple”, “mango”
–
dataPoint label string null “label1”,”label2″…
–
dataPoint indexLabel String null “{label}”, “Win”, “x: {x}, y: {y} ”
Supports Keyword
dataPoint indexLabelWrap Boolean true true, false
–
dataPoint indexLabelMaxWidth Number Automatically calculated based on the length of indexLabel 2, 10, 40 etc
–
dataSeries indexLabelTextAlign String “left” “left”,”center”, “right”
–
dataPoint indexLabelPlacement string “outside” “inside”,”outside”
–
dataPoint indexLabelOrientation string “horizontal” “horizontal”,”vertical”
Doesn’t apply in pie/funnel/pyramid/doughnut chart
dataPoint indexLabelBackgroundColor string null “red”,”#1E90FF”..
–
dataPoint indexLabelBorderColor String null “red”,”#FABD76″..
–
dataPoint indexLabelBorderThickness Number 0 1, 3
–
dataPoint indexLabelFontColor string “grey” “red”,”#1E90FF”..
–
dataPoint indexLabelFontSize number 18 16,20,24..
–
dataPoint indexLabelFontStyle string “normal” “normal”, “italic”, “oblique”
–
dataPoint indexLabelFontFamily string “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “arial”, “calibri”, “tahoma”..
–
dataPoint indexLabelFontWeight string “normal” “lighter”, “normal” ,”bold” , “bolder”
–
dataPoint indexLabelLineColor string “lightgrey” “red”, “#1E90FF”..
–
dataPoint indexLabelLineThickness number 2 4,6..
Applies to pie, funnel, pyramid & doughnut charts
dataPoint toolTipContent string auto. “{y} units”
Supports Keywords
dataPoint exploded boolean false true, false
Applies to pie, funnel, pyramid & doughnut charts
dataPoint color string from theme “red”,”#1E90FF”..
–
dataPoint lineColor string dataSeries lineColor “red”,”#1E90FF”..
–
dataPoint lineDashType string dataSeries lineDashType “dash”, “dot”..
–
dataPoint legendText string “dataPoint1”, “dataPoint2” .. “apples”, “oranges” ..
-auto when not set-
dataPoint legendMarkerType string “circle” “circle”, “square”, “cross”, “triangle”
–
dataPoint legendMarkerColor string marker Color “red”,”#1E90FF”..
–
dataPoint legendMarkerBorderColor string dataSeries marker Color “red”,”#1E90FF”..
–
dataPoint legendMarkerBorderThickness Number 0 2, 4 etc
–
dataPoint markerType string “circle” “circle”, “square”, “cross”, “triangle”
Applies to line, area, bubble, scatter charts
dataPoint markerColor string dataSeries Color “red”,”#1E90FF”..
Applies to line, area, bubble, scatter charts
dataPoint markerSize number auto. Zero for area chart 5,10..
Applies to line, area, bubble, scatter charts
dataPoint markerBorderColor string dataSeries color. “red”,”#1E90FF”..
Applies to line, area, bubble, scatter charts
dataPoint markerBorderThickness number 1 4,6..
Applies to line, area, bubble, scatter charts
dataPoint click function null function(e) { },
–
dataPoint mouseover function null function(e) { },
–
dataPoint mouseout function null function(e) { },
–
dataPoint mousemove function null function(e) { },
–
dataPoint cursor String “default” “pointer”, “crosshair”, etc Sets cursor type for the dataPoint
dataPoint highLightEnabled Boolean true false, true Enables or Disables highlighting of dataPoint on mouse hover.
dataPoint indexLabelLineDashType String “solid” “dot”, “dash”…
–
dataPoint indexLabelFormatter Function null function(e) { }
–
dataPoint showInLegend Boolean false true, false
–
If you have any questions, please feel free to ask in our forums.Ask Question

10 Comments

  1. Pingback: Lightswitch HTML & Canvas JS

  2. Pingback: Lightswitch HTML & Canvas JS. Interactive HTML5 Charts | ioi

  3. Pingback: IOI : Lightswitch HTML & Canvas JS. Interactive HTML5 Charts

  4. transcedentalia says:

    Is there a way to show the y value of a column chart on each column and not only on mouse hover as a tool tip?

  5. travis says:

    is there a way to get the actual canvas x/y position of a data point?
    also, how could i draw a section of a graph colored about the x or y axis? or about multiple (let’s say i want to create a rectangle over a certain x/y range of a line chart).
    thanks

  7. sandeep says:

    How can I initialize datapoints array dynamically? instead of say, 10 points I want to add as many points as available in a javascript array;

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