Quick Start: Create your First StockChart in 5 minutes

This tutorial helps you create & customize CanvasJS StockChart with live examples in JavaScript. With every example, try to edit the code to better understand the behavior of StockChart with various options. You can also download sample from the code-editor and run locally on your machine.

Ready to run the example in your local machine? Follow the instruction below:

1. Copy the code from the above editor and save it locally as HTML file. Alternately, you can download the code directly from the editor.
2. Run the HTML file.
   You will see the above StockChart running on your machine.
3. Now change type parameter to “area” or “spline”.
   You have just created your first StockChart.

So easy, right!

Next Step: Continue with the tutorial to learn more about customizations, most commonly used properties & features.

Multiple Charts

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.

Customizing StockChart

Above StockChart can be further customized to improve the visualization. Here are some of the customizations:

1. Prefix $ to values on y axis and in toolTip.
2. Add axis title in charts.
3. Reduce the height of Volume chart.
4. Set initial range of the slider.

Adding prefix to the values is pretty simple. You can do so by setting prefix property inside axisY. And to show $ in toolTip, you need to set yValueFormatString inside dataSeries.

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%”).

Initial range of the slider can be set by using minimum and maximum properties inside slider.

Below is how the StockChart looks with the above properties set.

Changing StockChart Theme

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.

More Customizations

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.