If your download hasn’t started, please download from below:
<script src="https://cdn.canvasjs.com/ga/canvasjs.min.js"></script>
<script src="https://cdn.canvasjs.com/ga/canvasjs.stock.min.js"></script>
npm install @canvasjs/charts
npm install @canvasjs/stockcharts
For a quick setup, install the CanvasJS Chart / StockChart directly via npm into your React, Angular, Vue as shown below
Install CanvasJS Charts Package from NPM package manager.
npm install @canvasjs/charts
As CanvasJS Charts package is installed, it can be imported using different module formats like AMD, CommonJS, etc.
import CanvasJS from '@canvasjs/charts';
Define a div (chart-container) where chart has to be rendered.
<div id="chartContainer"></div>
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();
As a first step, create a react app. Refer documentation on Creating a New React App for more info.
Install CanvasJS React Charts package via npm by running the following command.
npm install @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;
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> ); } }
Create an angular app. Please refer angular documentation for prerequisites, environment setup & tutorial on creating angular app.
Install CanvasJS Angular Charts package via npm by running the following command.
npm install @canvasjs/angular-charts
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 { }
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>
Create Vue.js app. Please refer to Vue.js documentation for prerequisites, environment setup & tutorial on creating Vue.js project & app.
Install CanvasJS Vue Charts package via NPM by running the following command.
npm install @canvasjs/vue-charts
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');
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>
Install CanvasJS jQuery Charts Package from NPM package manager.
npm install @canvasjs/jquery-charts
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';
Define a div (chart-container) where the chart has to be rendered.
<div id="chartContainer"></div>
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);
Install CanvasJS StockCharts Package from NPM package manager.
npm install @canvasjs/stockcharts
As CanvasJS StockCharts package is installed, it can be imported using different module formats like AMD, CommonJS, etc.
import CanvasJS from '@canvasjs/stockcharts';
Define a div (stockchart-container) where stockchart has to be rendered.
<div id="stockChartContainer"></div>
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();
As a first step, create a react app. Refer documentation on Creating a New React App for more info.
Install CanvasJS React StockCharts package via npm by running the following command.
npm install @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;
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> ); } }
Create an angular app. Please refer angular documentation for prerequisites, environment setup & tutorial on creating angular app.
Install CanvasJS Angular Charts package from NPM by running the following command.
npm install @canvasjs/angular-stockcharts
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 { }
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>
Create Vue.js app. Please refer to Vue.js documentation for prerequisites, environment setup & tutorial on creating Vue.js project & app.
Install CanvasJS Vue StockCharts package via NPM by running the following command.
npm install @canvasjs/vue-stockcharts
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');
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>
Install CanvasJS jQuery StockCharts Package from NPM package manager.
npm install @canvasjs/jquery-stockcharts
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';
Define a div (stockchart-container) where stockchart has to be rendered.
<div id="stockChartContainer"></div>
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);
Approx one per month