Methods & Properties

In addition to all the options available, CanvasJS provides several Methods and Properties which allows you to directly access and interact programmatically with StockChart Elements like Title, Charts, Navigator, Range Selector, etc. This includes methods like getter / setter methods, render, export, print, etc.


Properties:

All StockChart Elements (title, charts, navigator, slider, rangeSelector, etc) and their options (like animationEnabled, slider, minimum, maximum, etc) become available as properties once the StockChart is rendered and they can be accessed using dot notation. This allows you to access several internally calculated values like slider minimum, slider maximum, inputFields startValue etc. Below are few examples 

stockChart.title
stockChart.navigator //Navigator Element
stockChart.rangeSelector //Range Selector Element
stockChart.navigator.slider.minium //Automatically calculated minimum of the slider

Note:
  • StockChart elements get created while rendering the StockChart (using stockChart.render()) and hence can be accessed once after StockChart renders.

Methods:

All StockChart elements 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.

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

For example, you can read automatically calculated “minimum” value of slider 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 StockChart in order to customize it.

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

stockChart.get("width"); //returns the width property of StockChart
stockChart.navigator.slider.get("minium"); //returns minimum property of slider
stockChart.rangeSelector.inputFields.get("startValue"); //returns startValue property of inputFields

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

stockChart.title.set("text", "Updated StockChart 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.
  • StockChart Elements get created after rendering the StockChart (using stockChart.render()) and hence StockChart Elements and their methods can only be accessed after Chart renders.

Element Specific Methods:

Along with getter setter methods, StockChart 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