How to create a ChartJS scatter plot in Angular

Angular is a TypeScript-based free, open-source framework developed by Google that allows its users to develop front-ends of mobile and web applications. It is focused on creating dynamic single-page applications (SPA) and provides a structured way to build client-side applications using TypeScript/JavaScript, HTML, and CSS. It also supports multiple libraries and encourages component-based architecture.

One of these libraries is ChartJS, a free, open-source JavaScript library for data visualization via multiple charts. These include line, bar, pie, scatter, and many more. It also gives the user animation capabilities on its charts, such as pop-ups. It is written in pure JavaScript and is entirely independent of other libraries.

Setting up Angular

Before starting the Angular setup, we must have Node.js and NPM (or Yarn) package manager. To install these, visit the official websitehttps://docs.npmjs.com/downloading-and-installing-node-js-and-npm/ for NPM and download the version compatible with our machine.

Now that we have set up Node.js and our package manager, we can proceed with Angular. Follow the steps below to download, install, and set up our Angular application.

  1. First, We will open our terminal and enter the command below to install our Angular CLI.

npm install -g @angular/cli
Install Angular CLI
  1. Now, we can create our Angular application by entering the command below, where we can replace scatterplotApp with any name we like. After we enter this, we need to enable routing and select CSS as our style.

ng new scatterplotApp
Create Angular application
  1. To make our process more accessible, we can use an IDE like VS Code and install extensions like Angular Language Service.

  2. Now run the following commands inside the newly created folder. The first command will build the code and generate multiple bundles for differential loading. The second command bundles our code with Webpack so that every change we make will be reflected on the browser. This will open our local page for our Angular application at the default port of "http://localhost:4200".

ng build scatterplotApp
ng serve scatterplotApp
Bundle code
  1. We will open another terminal and install ChartJs by entering the following command.

npm install chart.js
Install ChartJS
  1. Let us now create the component for our chart. To do so, use the following command.

ng generate component scatterplot
Generate component

Everything is set up now. The next step will be to add data to our chart elements and components.

Creating a scatter plot

Now that we have our components let us add the data in the specific files.

  1. First, we will open our "scatterplot.components.html" file. In it, we will paste the following code.

<div class="chart-container">
<canvas id="MyChart" >{{ chart }}</canvas>
</div>
Create char container
  1. Now, we will open our "scatterplot.components.ts" file. Here we will import charts.js and create two class functions. We will also declare our chart variable as public. The first function will be a ngOnInit function that runs when the class's constructor is called. This function will contain a function call to our second function. The second function called createChart will create the chart that we require.

import Chart from 'chart.js/auto';
// rest of the code
export class ScatterplotComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.createChart();
}
public chart: any;
createChart(){
this.chart = new Chart("MyChart", {
type: 'scatter', //this denotes tha type of chart
data: {// values on X-Axis
labels: [],
datasets: [
{ label: "", data: [''],},
{ label: "", data: [''],}]
},
options: { aspectRatio:2.5}
});}}
  1. Lastly, we need to add the HTML selector of our line chart to the "app.component.html" file.

<app-scatterplot></app-scatterplot>
Set HTML selector

We have finished creating our file line chart. Now, we can visit the local host page and see our plot. We have given a running version of the chart application below for convenience.

Example scatter plot

Note: Data taken from the Pakistan Bureau of Statistics.

Conclusion

ChartJs allows users to display data in a way that allows it to be interactive and visually appealing. Moreover, the ease of use and seamless integration with Angular makes it a popular choice for developers. Moreover, the extensive documentation at ChartJs creates an easy learning experience and encourages others to jump in. Overall, ChartJs is a robust library for those needing data visualization as it provides as is required, and it does so in an organized, fast, and presentable manner.

Free Resources

Copyright ©2024 Educative, Inc. All rights reserved