Angular Bubble Chart Example Tutorial

Hi all,
Hope all are good. Do you looking for a good example of angular bubble chart example. Do you look at here a example of angular bubble chart npm. Now i’m going to show you a short tutorial about angular ng2-charts bubble chart . I will help you to give a simple example of how to add bubble chart in angular project.

Now in this post i will use ng2-charts npm package to create bubble chart in angular 11 application. We will now simply install that ng2-charts npm package and use Charts Module module to create that code.

We can easily add any bubble chart in angular 6, angular 7, angular 8, angular 9, angular 10 and angular 11 any version app.

So, let’s see and start bellows steps and get qr code as like bellow:

Step 1: Create New App

We can easily create any angular app by using bellow command:

ng new myNewApp

Step 2: Install ng2-charts npm Package

Now in this step, we need to just install ng2-charts for our angular application. so let’s run and add this as like bellow:

npm install ng2-charts chart.js --save

Step 3: Import ChartsModule

Now we need to import ChartsModule module as like as bellow code:

src/app/app.module.ts

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 { }

Read Also : Angularjs PHP MySQL Pagination Example

Step 4: Update Ts File

Here, now we need to update ts file as like as bellow:

src/app/app.component.ts

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 5: Update HTML File

Here, now we need to update also html file as like as bellow code:

src/app/app.component.html

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

Now open commend pad and run by bellow command:

ng serve

now you can check it.

hope it can help you…