Getting Started with CanvasJS Angular Component

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 & 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 Chart Component

  1. You no longer have to call render() method during the initial render. You need to call render whenever data is updated.
  2. You can get reference to the chart instance by passing the call-back function like (chartInstance)=”getChartInstance($event)” to the component & get the instance as a callback parameter. This allows you to access all chart properties and methods including render().
  3. Once you get reference to the chart object, you can update any of the options – like chart.options.data[0].type = “column” and call chart.render(). Refer Updating Chart Options / Data for more information.
  4. You can also style the chart component as shown below 
    5. <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height: '360px'}"></canvasjs-chart>

Step-By-Step Instruction

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

Install CanvasJS Angular Charts package to your Angular app. 

npm install @canvasjs/angular-charts

3. Import Angular Chart Module & register it

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

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

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

@Component({
  selector: 'app-root',
  standalone: true,
    imports: [
      CommonModule,
      RouterOutlet,
      CanvasJSAngularChartsModule
    ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

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';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    CanvasJSAngularChartsModule
  ],
  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>

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.

If you have any questions, please feel free to ask in our forums.Ask Question