Downloading CanvasJS Library

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

Download CanvasJS StockChart Library from here. Extract the downloaded file and put the content in the same folder as the html file.

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://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
  <script type="text/javascript">
  window.onload = function () {  
  var stockChart = new CanvasJS.StockChart("stockChartContainer",{
	  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="stockChartContainer" style="height: 400px; width: 100%;"></div>
  </body>
  </html>

1. Install CanvasJS StockCharts

Install CanvasJS StockCharts Package from NPM package manager.

npm install @canvasjs/stockcharts

2. Import StockChart

As CanvasJS StockCharts package is installed, it can be imported using different module formats like AMD, CommonJS, etc.

import CanvasJS from '@canvasjs/stockcharts';

3. Define container for the StockChart

Define a div (stockchart-container) where stockchart has to be rendered.

<div id="stockChartContainer"></div>

4. Create & Render the StockChart

Create stockchart by passing the container-id of the div that you created in the previous step and stockchart-options. Once the stockchart is created, render the stockchart by calling stockChart.render();

//Create StockChart
var dataPoints = [];
var stockChart = new CanvasJS.StockChart("stockChartContainer",{
	title:{
	text:"CanvasJS StockChart"
	},
	charts: [{
	data: [{
		type: "spline",
		dataPoints: dataPoints
	}]
	}]
});

var limit = 365;    //increase number of dataPoints by increasing this
var x = new Date(2019, 00, 00), y = 1000;
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));
}

// Render StockChart
stockChart.render();

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.Ask Question