Table of Contents
@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. <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. // 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. Imagine you’re comparing the sales performance of your top product lines across different regions, or…
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…