Angular is one of the popular frameworks for web development that aids in building rich web page applications & dashboards. So we have built angular chart component for CanvasJS. This Tutorial teaches you to quickly add beautiful Charts to your Angular Applications using CanvasJS.
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 Chart Component
<canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height: '360px'}"></canvasjs-chart>
Download CanvasJS Chart – it includes angular component.
Create an angular app. Please refer angular documentation for prerequisites, environment setup & tutorial on creating angular app.
Save canvasjs.min.js & canvasjs.angular.component.ts files in the assets folder ( src or src/assets or src/lib ).
Import the chart module into Angular application (app.module.ts) & register the module.
import { NgModule } from '@angular/core'; … import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component'; var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart; @NgModule({ declarations: [ AppComponent, CanvasJSChart, … ], … }) export class AppModule { }
Define the chart-options in app.component.ts & use ‘canvasjs-chart’ selector to create chart in app.component.html
//app.component.ts import { NgModule } from '@angular/core'; … export class AppComponent { … chartOptions = { title: { text: "Basic Column Chart in Angular" }, data: [{ type: "line", 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>
In order to make it simpler we have also created various examples with different sets of use-cases. Please check out our Angular Chart Gallery & various chart types listed below.
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