Ready to run the example in your local machine? Follow the instruction below:
So easy, right!
Next Step: Continue with the tutorial to learn more about customizations, most commonly used properties & features.
We encourage you to edit the code as described in the comments and familiarize yourself with the API.
Now, if you like to show price and volume in the same StockChart, you need to add one more chart to the charts array. Below is how it can be done.
Above StockChart can be further customized to improve the visualization. Here are some of the customizations:
Height of individual charts can be controlled using height property. Height can either be mentioned in pixels (like 300, 500) or in percentage (like “50%”, “70%”).
Below is how the StockChart looks with the above properties set.
CanvasJS comes with built in themes that change the look and feel of StockCharts – like “light1”, “light2”, “dark1”, “dark2”.
You can change theme by setting theme property of stockchart option. Below is an example.
In case you like to customize it further, refer to the below table that lists important objects and properties in StockChart. Do try out these properties in the above StockChart example.
|Set the StockChart Title Size
|Set the StockChart Title Color
|Change the chart-type shown in navigator
|Change the region being shaded in navigator / slider