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