Downloading CanvasJS Library

You can download CanvasJS StockChart Library from Download Page.
There are 2 JavaScript source files included in the downloaded zip file.

    1. Uncompressed Source File – canvasjs.stock.js (Available only after purchasing Commercial Version)
    2. Compressed/Minified File – canvasjs.stock.min.js

Adding CanvasJS Script to your Web Pages

You can refer / include CanvasJS StockChart library to HTML file using src attribute in the <script> tag.
We recommend you to include compressed version for production environment, while you can continue to use uncompressed in development machine.


<head>
	<script type="text/javascript" src="canvasjs.stock.min.js"></script>
</head>

Testing the Installation

Create an HTML file in the same directory as library and copy the following code into it.

<!DOCTYPE HTML>    
<html>    
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<script type="text/javascript">
window.onload = function () {  
var stockChart = new CanvasJS.StockChart("chartContainer",{
  title:{
    text:"CanvasJS StockChart"
  },
  charts: [{
    data: [{
      type: "spline",
      dataPoints: dataPoints
    }]
  }]
});

stockChart.render();    
}

var limit = 365;    //increase number of dataPoints by increasing this
var x = new Date(2019, 00, 00), y = 1000;
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
  dataPoints.push({ x: x, y: y });
  x = new Date(x.setDate(x.getDate()+1))
  y += Math.round((Math.random() * 10 - 5));
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
</body>
</html>

Save the file and open it in browser. A Basic Stock Chart should render on your browser.

You can easily integrate CanvasJS StockCharts with server side technologies like ASP.NET MVC, PHP, Spring MVC, JSP and frameworks like React, Angular, Vue.js, etc.


Troubleshooting

If you can’t see the StockChart being rendered, please check browser console (Shortcut – Ctrl + Shift + J) for any error.

If you need further help feel free to post on our support forum at https://canvasjs.com/forums



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