Angular 11/12 Implementing Bubble Charts Using Charts js Library Example Tutorial

In this tutorial, we will see how to implement the bubble charts using the charts js library in the Angular 11/12 version. We will explain step by step from scratch how to create the bubble charts using the ng2-charts js library in the Angular 11/12 app.

In addition, this tutorial mainly aimed at explaining the example of creating the bubble charts.

Bubble Charts Using ng2-Charts js Library Example Tutorial

We simply need to follow the given steps for implementing the Bubble Chart using ng2-charts in the Angular 11/12 app:

Step 1 is to Create the New Angular App

Step 2 is to Install the Charts js Library

Step 3 is to Import-Module in App.Module.ts File

Step 4 is to Add Code on View File

Step 5 is to Add Code On app.Component ts File

Step 6 is to Start the Angular Bubble Chart App

Now, Let’s Learn in Detail

Step 1- Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new bubble-chart-app

Step 2 : Installing the Charts js Library 

Next, just install the NPM package called ng2-charts chart.js -save for implementing the bubble chart in the Angular app. Further, we can install the packages by executing the below-mentioned commands on the terminal:

npm install --save bootstrap

npm install ng2-charts chart.js --save

Afterward, we open the angular j.son file and update the given code into it:

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

Step 3: Import-Module in App.Module.ts File

Next, we visit the src/app directory and open the app.module.ts file. Thereafter, we also add the given lines into the 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: Adding the Code on View File

In the next step, we create the bubble chart in the Angular app. Then, we visit the src/app/ and the app.component.html after which, we update the following code into it:

<h1>Angular 11 bubble chart example - Thecodemon.com</h1>
   
<div style="display: block;">
  <canvas baseChart
    [datasets]="bubbleChartData"
    [options]="bubbleChartOptions"
    [colors]="bubbleChartColors"
    [legend]="bubbleChartLegend"
    [chartType]="bubbleChartType">
  </canvas>
</div>

Step 5: Adding Code On app.Component ts File

Now, follow this step in which we visit the src/app directory and open app.component.ts.  After this, we add the following code into the 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: Starting the Bubble Chart Angular App

Lastly, we reach the final step of implementation where we execute the following command on the terminal to start the bubble chart angular app:

ng serve

Conclusion

Finally, we reach the end of this tutorial where we have learned to implement the bubble chart in the Angular 12 app. We have tried to explain things in quite a simple way. Hope you have understood it well. 

Thanks