Pages

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 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.

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.