Methods & Properties

In addition to all the options / settings available, CanvasJS provides several Methods and Properties which allows you to directly access and interact programmatically with Chart Elements like Title, Axis, DataSeries, ToolTip, Legend, etc. This includes methods like getter / setter methods, render, export, print, convertValueToPixel, etc.


Properties:

All Chart Elements (Title, Axis, DataSeries, stripLines etc) and their options (like animationDuration, interval, minimum, maximum, etc) become available as properties once the chart is rendered and they can be accessed using dot notation. This allows you to access several internally calculated values like Axis minimum, Axis maximum, etc. Below are few examples.

chart.title
chart.axisX[0] //First Axis X Element
chart.axisX[1] // Second Axis X Element
chart.axisX[1].minimum // Automatically calculated Minimum of Axis X
chart.data[0] // DataSeries
chart.data[0].dataPoints[2] // Datapoint
chart.toolTip // Chart's ToolTip
Note:
  • Chart Elements get created while rendering the Chart (using chart.render()) and hence can be accessed only after Chart renders.

Methods:

All Chart elements except DataPoint contain get / set methods and some element specific methods.

Getter / Setter Methods:

All Chart elements except DataPoint have getter / setter methods which allows you to read / write properties of various chart elements. This gives you access to default / automatically calculated values.

For example, you can read automatically calculated “minimum” value of axis via get(“minimum”) – which you cannot do via the options / settings unless you have set the value yourself previously. Options are basically a set of values you pass to the chart in order to customize it.

Get Method takes property name as parameter and return it’s value.

chart.get("width") // returns width property of chart in pixels.
chart.axisY[0].get("minimum") // returns minimum property of axis.
chart.axisY[0].get("maximum") // returns maximum property of axis.
chart.title.get("text") // returns text property of title element.

Set Method takes 2 required properties (propertyName and value) and a third optional property which specifies whether to update the chart or not – which is true by default.

chart.title.set("text", "Updated Chart Title") // sets text property of title and updates the chart.

Above statement sets a new text value to Title and updates the chart with new value. In case you want to do couple of more operations before updating the chart, you can disable auto update by passing a third optional value as shown below.

chart.title.set("text", "Updated Chart Title", false)
Note:
  • All properties can be read either using dot notation or via get method. But you can change those values only via set method.
  • Chart Elements get created after rendering the Chart (using chart.render()) and hence Chart Elements and their methods can only be accessed after Chart renders.

Element Specific Methods::

Along with getter setter methods, chart elements also contain some element specific methods. You can refer to sections related to individual elements for more details.

For quick reference below are few important methods to remember.

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