Download CanvasJS Charts, Install via NPM or link from CDN

Charts
StockCharts

JavaScript

1. Install CanvasJS Charts via NPM

Install CanvasJS Charts Package from NPM package manager.

npm install @canvasjs/charts

2. Import Chart

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

import CanvasJS from '@canvasjs/charts';

3. Define container for the chart

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

<div id="chartContainer"></div>

4. Create & Render the chart

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

//Create 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();

1. Create a React App

As a first step, create a react app. Refer documentation on Creating a New React App for more info.

2. Install CanvasJS React Charts via NPM

Install CanvasJS React Charts package via npm by running the following command.

npm install @canvasjs/react-charts

3. Import CanvasJS React Charts

Import CanvasJS React Charts to your application.

import CanvasJSReact from '@canvasjs/react-charts';
//var CanvasJSReact = require('@canvasjs/react-charts');

var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

4. Set the chart-options & create chart

Once the package is imported, you are ready to go. Now you can add CanvasJSChart component with chart-options & container-style as props and onRef as optional props – that you can pass when you need reference to the chart instance.

//Create Chart
class App extends Component {
render() {
	const options = {
	title: {
		text: "Basic Column Chart in React"
	},
	data: [{
		type: "column",
		dataPoints: [
		{ label: "Apple",  y: 10  },
		{ label: "Orange", y: 15  },
		{ label: "Banana", y: 25  },
		{ label: "Mango",  y: 30  },
		{ label: "Grape",  y: 28  }
		]
	}]
	}
		
	return (
	<div>
		<CanvasJSChart options = {options}
		/* onRef = {ref => this.chart = ref} */
		/>
	</div>
	);
}
}

1. Create Angular App

Create an angular app. Please refer angular documentation for prerequisites, environment setup & tutorial on creating angular app.

2. Install CanvasJS Angular Charts via NPM

Install CanvasJS Angular Charts package via npm by running the following command.

npm install @canvasjs/angular-charts

3. Import CanvasJS Angular Charts Module & register the module

Import Angular Chart Module into your Angular application (app.module.ts) & register it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';

@NgModule({
declarations: [
	AppComponent
],
imports: [
	BrowserModule,
	CanvasJSAngularChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

4. Set the chart-options & create chart

Set the chart-options in app.component.ts & use ‘canvasjs-chart’ selector to create chart in app.component.html

//app.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})

export class AppComponent {
chartOptions = {
	title: {
		text: "Basic Column Chart in Angular"
	},
	data: [{
		type: "column",
		dataPoints: [
		{ label: "Apple",  y: 10  },
		{ label: "Orange", y: 15  },
		{ label: "Banana", y: 25  },
		{ label: "Mango",  y: 30  },
		{ label: "Grape",  y: 28  }
		]
	}]                
};
}

//app.component.html
<div>
<canvasjs-chart [options]="chartOptions"></canvasjs-chart>
</div>

1. Create a Vue.js App

Create Vue.js app. Please refer to Vue.js documentation for prerequisites, environment setup & tutorial on creating Vue.js project & app.

2. Install CanvasJS Vue Charts Plugin via NPM

Install CanvasJS Vue Charts package via NPM by running the following command.

npm install @canvasjs/vue-charts

3. Import CanvasJS Vue Charts plugin & register it globally

Import the Vue Charts plugin to your Vue.js application & register it globally.

import { createApp } from 'vue'
import App from './App.vue'

import CanvasJSChart from '@canvasjs/vue-charts';

const app = createApp(App);
app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
app.mount('#app');

4. Set the chart-options & create chart

Set the chart-options in app.vue & use ‘CanvasJSChart’ selector to create chart inside template tag.

<!-- App.vue -->
<script>
export default {
data() {
	return {
		chart: null,
		options: {
		animationEnabled: true,
		title:{
			text: "Vue.js Basic Column Chart"
		},
		data: [{
			type: "column",
			dataPoints: [
			{ label: "apple",  y: 10 },
			{ label: "orange", y: 15 },
			{ label: "banana", y: 25 },
			{ label: "mango",  y: 30 },
			{ label: "grape",  y: 28 }
			]
		}]
		}
	}
}
}
</script>
<template>
<CanvasJSChart :options="options"/>
</template>

1. Install CanvasJS jQuery Charts via NPM

Install CanvasJS jQuery Charts Package from NPM package manager.

npm install @canvasjs/jquery-charts

2. Import Chart

As CanvasJS jQuery Charts package is installed, it can be imported into your project. As the plugin has a dependency on jQuery, you have to import that as well.

import $ from "jquery";
import '@canvasjs/jquery-charts';

3. Define container for the chart

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

<div id="chartContainer"></div>

4. Create & Render the chart

Create the chart by passing the container-id of the div that you created in the previous step and chart-options.

var options = {
title:{
	text: "Basic Column Chart in jQuery"              
},
data: [{
	type: "column",
	dataPoints: [
	{ label: "apple",  y: 10  },
	{ label: "orange", y: 15  },
	{ label: "banana", y: 25  },
	{ label: "mango",  y: 30  },
	{ label: "grape",  y: 28  }
	]
}]
};
$("#chartContainer").CanvasJSChart(options);

JavaScript

1. Install CanvasJS StockCharts via NPM

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 chart is created, render the chart by calling stockChart.render();

//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();

1. Create a React App

As a first step, create a react app. Refer documentation on Creating a New React App for more info.

2. Install CanvasJS React StockCharts via NPM

Install CanvasJS React StockCharts package via npm by running the following command.

npm install @canvasjs/react-stockcharts

3. Import CanvasJS React StockCharts

Import CanvasJS React StockCharts to your application.

import CanvasJSReact from '@canvasjs/react-stockcharts';
//var CanvasJSReact = require('@canvasjs/react-charts');

var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart;

4. Set the stockchart-options & create stockchart

Once the package is imported, you are ready to go. Now you can add CanvasJSStockChart component with stockchart-options & container-style as props and onRef as optional props – that you can pass when you need reference to the chart instance.

//Create StockChart
class App extends Component {
render() {
	const 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")
		}
		}
	};
	const containerProps = {
		width: "80%",
		height: "450px",
		margin: "auto"
	};
	return (
		<div>
		<CanvasJSStockChart
			options={options}
			containerProps = {containerProps}
			onRef={ref => this.stockChart = ref}
		/>
		</div>
	);
}
}

1. Create Angular App

Create an angular app. Please refer angular documentation for prerequisites, environment setup & tutorial on creating angular app.

2. Install CanvasJS Angular StockCharts

Install CanvasJS Angular Charts package from NPM by running the following command.

npm install @canvasjs/angular-stockcharts

3. Import StockChart Component & register the module

Import Angular StockChart module into your Angular application (app.module.ts) & register it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { CanvasJSAngularStockChartsModule } from '@canvasjs/angular-stockcharts';

@NgModule({
declarations: [
	AppComponent
],
imports: [
	BrowserModule,
	CanvasJSAngularStockChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

4. Set the stockchart-options & create chart

Set the stockchart-options in app.component.ts & use ‘canvasjs-stockchart’ selector in app.component.html to create stockchart.

//app.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
stockChartOptions = {
	title: {
		text: "CanvasJS Angular StockChart"
	},
	theme: "light2",
	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")
		}
	}
}
}

//app.component.html
<div>
<canvasjs-stockchart [options]="stockChartOptions"></canvasjs-stockchart>
</div>

1. Create Vue.js App

Create Vue.js app. Please refer to Vue.js documentation for prerequisites, environment setup & tutorial on creating Vue.js project & app.

2. Install CanvasJS Vue StockCharts Plugin via NPM

Install CanvasJS Vue StockCharts package via NPM by running the following command.

npm install @canvasjs/vue-stockcharts

3. Import CanvasJS Vue StockCharts plugin & install it

Import the Vue StockCharts plugin to your Vue.js application & install it.

import { createApp } from 'vue'
import App from './App.vue'

import CanvasJSStockChart from '@canvasjs/vue-stockcharts';

const app = createApp(App);
app.use(CanvasJSStockChart); // install the CanvasJS Vuejs StockChart Plugin
app.mount('#app');

4. Set the stockchart-options & create stockchart

Set the stockchart-options in app.vue & use ‘CanvasJSStockChart’ selector to create stockchart inside template tag.

<!-- App.vue -->
<script>
export default {
data() {
	return {
		options: {
			title: {
				text: "CanvasJS StockChart in Vue.js"
			},
			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")
				}
			}
		}
	}
}
}
</script>
<template>
<CanvasJSStockChart :options="options" />
</template>

1. Install CanvasJS StockCharts via NPM

Install CanvasJS jQuery StockCharts Package from NPM package manager.

npm install @canvasjs/jquery-stockcharts

2. Import StockChart

As CanvasJS jQuery StockCharts package is installed, it can be imported into your project. As the plugin has a dependency on jQuery, you have to import that as well.

import $ from "jquery";
import '@canvasjs/jquery-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.

var stockChartOptions = {
title: {
text: "CanvasJS jQuery 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")
}
}
};

$("#stockChartContainer").CanvasJSStockChart(stockChartOptions);

Integration / Samples	Downloads
Getting Started (takes less than 5 minutes)	Tutorial includes in-page samples
React Charts Tutorial React Charts Demo	Download React Chart Samples
Angular Charts Tutorial Angular Charts Demo	Download Angular Chart Samples
Vue.js Charts Tutorial Vue.js Charts Demo	Download Vue.js Chart Samples
jQuery Charts Tutorial jQuery Charts Demo	Download jQuery Chart Samples
ASP.NET MVC Charts Tutorial ASP.NET MVC Charts Demo	Download ASP.NET Chart Samples
PHP Charts Demo	Download PHP Chart Samples
Python Django Charts Demo	Download Python Django Chart Samples
JSP Charts Demo	Download JSP Chart Samples
Spring MVC Charts Demo	Download Spring MVC Chart Samples
Dashboard Samples	Download Dashboard Samples

Your download is starting now…

Download

New in this Version

CDN

CanvasJS Chart CDN Link

CanvasJS StockChart CDN Link

NPM

Install CanvasJS Charts via NPM

Install CanvasJS StockCharts via NPM

Install via NPM

JavaScript

1. Install CanvasJS Charts via NPM

2. Import Chart

3. Define container for the chart

4. Create & Render the chart

More Links

1. Create a React App

2. Install CanvasJS React Charts via NPM

3. Import CanvasJS React Charts

4. Set the chart-options & create chart

More Links

1. Create Angular App

2. Install CanvasJS Angular Charts via NPM

3. Import CanvasJS Angular Charts Module & register the module

4. Set the chart-options & create chart

More Links

1. Create a Vue.js App

2. Install CanvasJS Vue Charts Plugin via NPM

3. Import CanvasJS Vue Charts plugin & register it globally

4. Set the chart-options & create chart

More Links

1. Install CanvasJS jQuery Charts via NPM

2. Import Chart

3. Define container for the chart

4. Create & Render the chart

More Links

JavaScript

1. Install CanvasJS StockCharts via NPM

2. Import StockChart

3. Define container for the StockChart

4. Create & Render the StockChart

More Links

1. Create a React App

2. Install CanvasJS React StockCharts via NPM

3. Import CanvasJS React StockCharts

4. Set the stockchart-options & create stockchart

More Links

1. Create Angular App

2. Install CanvasJS Angular StockCharts

3. Import StockChart Component & register the module

4. Set the stockchart-options & create chart

More Links

1. Create Vue.js App

2. Install CanvasJS Vue StockCharts Plugin via NPM

3. Import CanvasJS Vue StockCharts plugin & install it

4. Set the stockchart-options & create stockchart

More Links

1. Install CanvasJS StockCharts via NPM

2. Import StockChart

3. Define container for the StockChart

4. Create & Render the StockChart

More Links

Integration & Samples

SUBSCRIBE TO UPDATES

5-minute Jumpstart →

Gallery →

Forum →