Angular : ChartJs And TypeScript Free Guide

Are you ready to step up your web development knowledge?

Modern applications demand interactive, responsive, and dynamic data visualization. By combining Angular, ChartJS, and TypeScript, you can build clean, scalable, and high-performance dashboards with minimal effort.

Introduction: Why Combine Angular, ChartJs and TypeScript?

In modern frontend architecture:

Angular provides structure and scalability
TypeScript ensures type safety and maintainability
Chart.js delivers lightweight, beautiful visualizations

Together, they allow you to build production-ready dashboards, admin panels, and reporting systems efficiently.

What is Chart.js

Chart.js is a free, open-source JavaScript library
Used Data visualization

✅ Key Features

Lightweight (~60KB)
Fully responsive
Animated charts
TypeScript support
Canvas-based rendering

📌 Supported Chart Types (v4+)

Bar
Line
Pie
Doughnut
Radar
Polar Area
Bubble
Scatter

Note: “Area chart” is now typically built using a Line chart with fill: true.

Installation

Chart.js can be installed via npm or Bower.

Npm

npm install chart.js --save

Bower

bower install chart.js --save

🏗 Creating an Organization Bar Chart

We’ll create a clean, production-ready implementation.

1️⃣ Create Component

ng generate component sales-chart --standalone

2️⃣ sales-chart.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Chart, ChartConfiguration, registerables } from 'chart.js';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';Chart.register(...registerables);@Component({
  selector: 'app-sales-chart',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './sales-chart.component.html'
})
export class SalesChartComponent implements OnInit {  @ViewChild('barCanvas') barCanvas!: ElementRef<HTMLCanvasElement>;
  chart!: Chart;  salesData: any[] = [];  constructor(private http: HttpClient) {}  ngOnInit(): void {
    this.loadSalesData();
  }  loadSalesData(): void {
    this.http.get<any[]>('/api/sales').subscribe(data => {
      this.salesData = data;
      this.createChart();
    });
  }  createChart(): void {
    const labels = this.salesData.map(x => x.itemDescription);
    const values = this.salesData.map(x => x.qty);    const config: ChartConfiguration<'bar'> = {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: 'Number of Items Sold',
          data: values,
          backgroundColor: '#4CAF50',
          borderColor: '#2E7D32',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        plugins: {
          title: {
            display: true,
            text: 'Organization Sales Report'
          }
        },
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };    this.chart = new Chart(this.barCanvas.nativeElement, config);
  }
}

3️⃣ sales-chart.component.html

<div class="chart-container">
  <canvas #barCanvas></canvas>
</div><table border="1">
  <tr>
    <th>Item Description</th>
    <th>Qty</th>
  </tr>
  <tr *ngFor="let item of salesData">
    <td>{{ item.itemDescription }}</td>
    <td>{{ item.qty }}</td>
  </tr>
</table>

ChartJs and TypeScript — *ChartJS and TypeScript*

Angular : ChartJs and TypeScript Free Guide

Contents