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.
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
All StockChart elements contain get / set methods and some element specific 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);
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.