Table of Contents
What is Chart js?
How to Create a Chart in Angular Using Chart js?
Step 1 – What are Some Prerequisites Required to Create Charts?
To complete this tutorial, you will need:- You should have Node.js installed locally.
- This requires you to install Angular on your computer. You should also know about setting up an Angular project and using Angular components.
Step 2 – How to Setup the Project?
For this step, you can use@angular/cli
to create a new Angular project. After this, in your terminal window, type the following command:
npx @angular/cli new angular-chartjs-example --style=css --routing=false --skip-tests
The above command configures a new Angular project. The command set styles to “CSS,” with no routing and skipping tests.
Next, navigate to the directory of the newly created project:
cd angular-chartjs-example
Now, run the following command:
npm install chart.js@2.9.4 ng2-charts@2.4.2
This will install Chart js
. The next step will be to add Chart js to your Angular application. This is Chart js by opening the angular.json
file in your code editor and modifying it to add Chart.min.js
. Take a look at the contents of the angular.json
file below:
{
// ...
"projects": {
"angular-chartjs-example": {
// ...
"architect": {
"build": {
// ...
"options": {
// ...
"scripts": [
"node_modules/chart.js/dist/Chart.min.js"
],
"allowedCommonJsDependencies": [
"chart.js"
]
},
// ...
},
}
}},
// ...
Finally, open the app.module.ts
in your editor and modify the file to include ChartsModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
With all this inplace, you can start work on the chart component.
Step 3 – What Should you do to Create the Chart Component?
Let us now create a Chart Component. In this example, we will be constructing a line graph for time-series data. So, Open up your code editor and open the app.component.html file. Next modify this file into:<div style="width: 40%;">
<canvas
baseChart
>
</canvas>
</div>
Next, in the same file modify the canvas to include a legend and chartType:
<div style="width: 40%;">
<canvas
...
[chartType]="'line'"
[legend]="true"
>
</canvas>
</div>
But what does chartType
and legend
do? chatType
allows you to set the base type of your chart. It can either be set to pie
, bar
, line
, polarArea
, radar, doughnut
, or horizontalBar
. The legend is a boolean value that specifies whether the legend should be displayed in the chart. Now, modify the canvas to pass in your datasets
, add in your labels
, and your options
:
<div style=”width: 40%;”>
<canvas
…
[datasets]=”chartData”
[labels]=”chartLabels”
[options]=”chartOptions”
>
</canvas>
</div>
Finally, open app.component.ts in your editor and define the array your referenced in the template. Moreover, add in you chart labels and the object referenced :
// ...
export class AppComponent {
// ...
chartData = [
{
data: [330, 600, 260, 700],
label: 'Account A'
},
{
data: [120, 455, 100, 340],
label: 'Account B'
},
{
data: [45, 67, 800, 500],
label: 'Account C'
}
];
chartLabels = [
'January',
'February',
'March',
'April'
];
chartOptions = {
responsive: true
};
}
You can visit the official Chart js documentation [1] to learn more about the available chart options.
Finally, recompile your application using the following command:
npm start
You can now visit localhost:4200 to observe the chart you’ve drawn.
What is an Easier Way to Create Charts?
// Setup needed in app.module.ts
import { NgModule, enableProdMode } from '@angular/core'
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FusionChartsModule } from 'angular-fusioncharts';
// Load FusionCharts
import * as FusionCharts from 'fusioncharts';
// Load Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
// Load themes
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
// Add dependencies to FusionChartsModule
FusionChartsModule.fcRoot(
FusionCharts,
Charts,
FusionTheme
)
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FusionChartsModule
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
As you can see, FusionCharts makes creating charts on Angular easier and more intuitive than ever. FusionCharts offers many other features which we haven’t mentioned. We recommend visiting the official page to learn more about FusionCharts.