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.

Try Editing The Code

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.

We encourage you to edit the code as described in the comments and familiarize yourself with the API.

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.

Try Editing The Code

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.

Try Editing The Code

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.

Try Editing The Code

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.

Customization Object Property
Set the StockChart Title Size title fontSize
Set the StockChart Title Color title fontColor
Change the chart-type shown in navigator dataSeries type
Change the region being shaded in navigator / slider slider maskInverted

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question