Angular Bubble Chart Example Tutorial

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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…

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →