Chart.js is known for its simplicity and ease of use. It creates responsive charts out-of-the-box and will look good on most devices natively. Chart.js uses HML5 canvas elements, which is more scalable than an SVG rendering approach. it is well documented with good community support. Chart.js isn't as highly customizable as other options on the market, which can be a negative for those looking to fully customize their end experience.
Angular is a popular open-source framework developed by Google for building dynamic web applications. It's part of a broader ecosystem that includes tools and libraries designed to work together to enable efficient development of high-quality applications. Angular is known for its robustness, scalability, and ability to create single-page applications (SPAs) that offer a smooth, native-like user experience. Angular has a component-based architecture, enabling great modularity. Additionally, it is great at syncing data between a view and a model. It can have a steep learning curve, but has a great community and high performance.
In this tutorial, we'll explore how to use Chart.js with Angular to create dynamic and interactive charts. Chart.js is a popular open-source library for building charts, and when combined with Angular, it allows for the creation of customizable charts within an Angular application.
First, create a new Angular project by running:
ng new chartjs-angular-example
Navigate to the project directory:
cd chartjs-angular-example
To use Chart.js in our Angular project, we also need to install ng2-charts, a library that provides Angular directives for Chart.js. Run the following command:
npm install chart.js ng2-charts
Next, import NgChartsModule from ng2-charts into your app module (app.module.ts). This step is crucial for making Chart.js components available in your Angular application.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgChartsModule } from 'ng2-charts';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgChartsModule // Add this line
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now, let's add a chart to one of your components. Open the app.component.html file and add the following code to include a canvas element where the chart will be rendered.
<div style="display: block">
<canvas baseChart
[data]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType">
</canvas>
</div>
In your component's TypeScript file (app.component.ts), add the chart configuration:
import { Component } from '@angular/core';
import { ChartData, ChartType } from 'chart.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public lineChartData: ChartData<'line'> = {
datasets: [
{
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Series A',
fill: false,
}
],
};
public lineChartLabels: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartOptions = {
responsive: true,
};
public lineChartColors = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,255,0,0.28)',
},
];
public lineChartLegend = true;
public lineChartType: ChartType = 'line';
}
Finally, start your Angular application to see the Chart.js chart in action:
ng serve
Open your browser and go to http://localhost:4200 to view your chart.
This simple example demonstrates how to integrate Chart.js in an Angular application to create a line chart. You can easily switch chart types and customize the charts to fit your data visualization needs by altering the chart configuration in your Angular component.
