Angular is one of the popular frameworks for web development that aids in building rich web page applications & dashboards. So we have built angular component for CanvasJS StockChart. This Tutorial teaches you to quickly add beautiful StockCharts to your Angular Applications using CanvasJS & NPM.
In case you have any suggestions/feedback please post it in our forum.
Here are couple of things that you need to remember while using Angular StockChart Component
<canvasjs-stockchart [options]="stockChartOptions" [styles]="{width: '100%', height: '450px'}"></canvasjs-stockchart>
Create an angular app. Please refer angular documentation for prerequisites, environment setup & tutorial on creating angular app.
Install CanvasJS Angular StockCharts package to your Angular application via NPM.
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 { NgModule } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { let 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>
In order to make it simpler we have also created various examples with different sets of use-cases. Please check out our Angular StockChart Gallery for the same.
Server Side Technologies |
Front End Technologies |
Contact |
|
---|---|---|---|
ASP.NET MVC Charts | JavaScript Charts | FAQs | |
PHP Charts | jQuery Charts | Sales Enquiries | |
Spring MVC Charts | React Charts | Support Forum | |
JSP Charts | Angular Charts | Careers | |
JavaScript StockCharts | |||
Privacy Policy © fenopix