Bubble Chart in Angular 16

A bubble chart is a data visualization tool that displays three dimensions of data: the x-axis, the y-axis, and the bubble size. Each data point in a bubble chart is represented as a circle, where the x-axis and y-axis define its position, and the bubble size represents a numerical value associated with that data point.

In this tutorial, you will learn how to implement a bubble chart using the ng2-charts js library in the angular 16 projects.

Angular 16 Bubble Charts Example

Steps to implement bubble charts in angular 16 project:

• Step 1 – Set Up the Angular Project
• Step 2 – Install Chart.js
• Step 3 – Import Bubble Chart Component to the App Module
• Step 4 – Implement the Bubble Chart in HTML Template
• Step 5 – Initialize the Bubble Chart with Chart.js
• Step 6 – Start the Angular Bubble Chart App

Step 1 – Set Up the Angular Project

First of all, open your cm or command prompt and execute the following command on it to install and create a new Angular project using the Angular CLI:

ng new angular-bubble-chart-example
cd angular-bubble-chart-example

Step 2 – Install Chart.js

Next, you need to install the NPM package called ng2-charts chart.js –save for implementing Bubble chart in the angular project. So, open cmd and execute the following commands into it:

npm install --save bootstrap

npm install ng2-charts chart.js --save

Then, open the angular.json file and update the following code in it:

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]

Step 3 – Import Bubble Chart Component to the App Module

Next, visit src/app directory and open app.module.ts file. And then add the following lines to app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ChartsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 4 – Implement the Bubble Chart in HTML Template

Next, you need to implement a bubble chart in the angular project. So, visit src/app/ and app.component.HTML and update the following code into it:

<h1>Angular 16 bubble chart example - Tutsmake.com</h1>

<div style="display: block;">
  <canvas baseChart
    [datasets]="bubbleChartData"
    [options]="bubbleChartOptions"
    [colors]="bubbleChartColors"
    [legend]="bubbleChartLegend"
    [chartType]="bubbleChartType">
  </canvas>
</div>

Step 5 – Initialize the Bubble Chart with Chart.js

Next, you need to initialize bubble chart with chart.js in your angular project. So, visit the src/app directory and open app.component.ts. Then add the following code into the app.component.ts file:

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color } from 'ng2-charts';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public bubbleChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{
        ticks: {
          min: 0,
          max: 30,
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 30,
        }
      }]
    }
  };
  public bubbleChartType: ChartType = 'bubble';
  public bubbleChartLegend = true;
  public bubbleChartData: ChartDataSets[] = [
    {
      data: [
        { x: 10, y: 10, r: 10 },
        { x: 15, y: 5, r: 15 },
        { x: 26, y: 12, r: 23 },
        { x: 7, y: 8, r: 8 },
      ],
      label: 'Series A',
    },
    {
      data: [
        { x: 8, y: 7, r: 5 },
        { x: 15, y: 5, r: 15 },
        { x: 5, y: 15, r: 15 },
        { x: 7, y: 8, r: 8 },
      ],
      label: 'Series B',
    },
  ];
  constructor() { }
  ngOnInit() {
  }
}

Step 6 – Start the Angular Bubble Chart App

Finally, execute the following command on cmd to start angular bubble chart app:

ng serve

Visit http://localhost:4200 in your web browser to see the Angular 16 Bubble Chart Example in action!

Conclusion

Congratulations! You’ve successfully learned how to implement bubble chart using Angular 16 and Chart.js. Feel free to enhance this example by customizing the chart appearance or integrating real data from APIs.

Recommended Angular Tutorials