# CanvasJS JavaScript Charts - Official
CanvasJS is a [JavaScript Charting Library](https://canvasjs.com/javascript-charts/) for creating interactive charts & graphs for your web pages. Library supports a wide range of chart types including bar, line, area, pie, doughnut charts, etc. Charts work 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 Charts Demo](https://canvasjs.com/javascript-charts/)
- [Download CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/)
- [Chart Documentation](https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/)
- [CanvasJS Support Forum](https://canvasjs.com/forums/)
## Installing CanvasJS JavaScript Charts
There are multiple ways to install CanvasJS JavaScript Charts. You can directly add script-tag to include it from [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/charts). Please refer [documentation page](https://canvasjs.com/docs/charts/intro/installation/) for more information.
#### Install Charts via NPM
```
npm install --save @canvasjs/charts
```
See [npm documentation](https://docs.npmjs.com/) to know more about npm usage.
After CanvasJS script is installed, it can be imported using different module formats like AMD, CommonJS, etc.
```
//Load CanvasJS Charts
import * as CanvasJS from "@canvasjs/charts";
//var CanvasJS = require("@canvasjs/charts");
//Intantiate Chart
var chart = new CanvasJS.Chart("container", {
//Chart Options - Check https://canvasjs.com/docs/charts/chart-options/
title:{
text: "Basic Column Chart in JavaScript"
},
data: [{
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
});
//Render Chart
chart.render();
```
#### Using CanvasJS Charts via CDN
You can access CanvasJS Charts from our CDN directly.
```
```
#### Download from Official Site
You can download the JavaScript charting 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.
```
```
#### Interactive JavaScript Charts
#### JavaScript Chart with Multiple Y-axes
#### JavaScript Chart with Zooming / Panning
### Related Chart Packages
* [React Charts](https://www.npmjs.com/package/@canvasjs/react-charts)
* [Angular Charts](https://www.npmjs.com/package/@canvasjs/angular-charts)
* [Vue Charts](https://www.npmjs.com/package/@canvasjs/vue-charts)
* [jQuery Charts](https://www.npmjs.com/package/@canvasjs/jquery-charts)
## License
Commercial use of CanvasJS Chart 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.