# CanvasJS JavaScript StockCharts - Official
CanvasJS StockCharts provides you with a powerful [JavaScript StockChart](https://canvasjs.com/javascript-stockcharts/) library for creating advanced financial charts for your web pages & applications. StockCharts work well with all the popular Technologies & Frameworks like React, Angular, jQuery, PHP, etc.
### Browser Support
| 
Chrome | 
Edge | 
Firefox | 
Safari | 
IE9+ | 
IE8 |
|:------:|:-------:|:------:|:-----:|:----:|:----:|
| 4+ ✔ | 12+ ✔ | 3.6+ ✔ | 4+ ✔ | 9+ ✔ | 8 ✔ |
## Important Links
- [Official Website](https://canvasjs.com/)
- [JavaScript StockCharts Demo](https://canvasjs.com/javascript-stockcharts/)
- [Download CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/)
- [StockChart Documentation](https://canvasjs.com/docs/stockcharts/basics-of-creating-html5-stockchart/)
- [StockChart Support Forum](https://canvasjs.com/forums/forum/stockchart-support/)
## Installing CanvasJS JavaScript Stock Charts
There are multiple ways to install CanvasJS StockChart to your web-app. You can directly add script-tag to include CanvasJS StockCharts from our [CDN or download it from official site](https://canvasjs.com/download-html5-charting-graphing-library/) or install it from [NPM registry](https://npmjs.org/package/@canvasjs/stockcharts). Please refer [documentation page](https://canvasjs.com/docs/stockcharts/basics-of-creating-html5-stockchart/) for more information.
#### Install StockCharts via NPM
```
npm install @canvasjs/stockcharts
```
See [npm documentation](https://docs.npmjs.com/) to know more about npm usage.
#### Using CanvasJS Stock Charts via CDN
You can access CanvasJS StockCharts from our CDN directly.
```
```
#### Download from Official Site
You can download the JavaScript stockchart library along with examples from our official [download page](https://canvasjs.com/download-html5-charting-graphing-library/). Save it in your project directory & add it in your application.
```
```
## Usage
Once you have installed the package, you can start using CanvasJS StockCharts in your project. CanvasJS StockCharts can be imported using different module formats like AMD, CommonJS, etc.
```
//Load CanvasJS StockCharts
import * as CanvasJS from "@canvasjs/stockcharts";
//var CanvasJS = require("@canvasjs/stockcharts");
```
Define container for the stockchart.
```
```
Create & Render the stockchart.
```
//Create StockChart
var stockChart = new CanvasJS.StockChart("stockChartContainer", {
//StockChart Options - Check https://canvasjs.com/docs/stockcharts/stockchart-options/
title: {
text: "CanvasJS StockChart"
},
charts: [{
data: [{
type: "line",
dataPoints: [
{ x: new Date("2018-01-01"), y: 71 },
{ x: new Date("2018-02-01"), y: 55 },
{ x: new Date("2018-03-01"), y: 50 },
{ x: new Date("2018-04-01"), y: 65 },
{ x: new Date("2018-05-01"), y: 95 },
{ x: new Date("2018-06-01"), y: 68 },
{ x: new Date("2018-07-01"), y: 28 },
{ x: new Date("2018-08-01"), y: 34 },
{ x: new Date("2018-09-01"), y: 14 },
{ x: new Date("2018-10-01"), y: 71 },
{ x: new Date("2018-11-01"), y: 55 },
{ x: new Date("2018-12-01"), y: 50 },
{ x: new Date("2019-01-01"), y: 34 },
{ x: new Date("2019-02-01"), y: 50 },
{ x: new Date("2019-03-01"), y: 50 },
{ x: new Date("2019-04-01"), y: 95 },
{ x: new Date("2019-05-01"), y: 68 },
{ x: new Date("2019-06-01"), y: 28 },
{ x: new Date("2019-07-01"), y: 34 },
{ x: new Date("2019-08-01"), y: 65 },
{ x: new Date("2019-09-01"), y: 55 },
{ x: new Date("2019-10-01"), y: 71 },
{ x: new Date("2019-11-01"), y: 55 },
{ x: new Date("2019-12-01"), y: 50 }
]
}]
}],
navigator: {
slider: {
minimum: new Date("2018-07-01"),
maximum: new Date("2019-06-30")
}
}
});
//Render StockChart
stockChart.render();
```
### Related StockChart Packages
* [React StockCharts](https://www.npmjs.com/package/@canvasjs/react-stockcharts)
* [Angular StockCharts](https://www.npmjs.com/package/@canvasjs/angular-stockcharts)
* [Vue StockCharts](https://www.npmjs.com/package/@canvasjs/vue-stockcharts)
* [jQuery StockCharts](https://www.npmjs.com/package/@canvasjs/jquery-stockcharts)
## License
Commercial use of CanvasJS StockChart requires a commercial license. Without a commercial license you can use it for evaluation (or demonstrations/testing) purposes. Students, Educational Institutions, Personal Websites using CanvasJS for non-commercial purposes are qualified for the free license. Check out [License Page](https://canvasjs.com/license/) to know more about licenses.