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 website 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.
First, We will open our terminal and enter the command below to install our Angular CLI.
npm install -g @angular/cli
Now, we can create our Angular application by entering the command below, where we can replace
scatterplotAppwith any name we like. After we enter this, we need to enable routing and select CSS as our style.
ng new scatterplotApp
To make our process more accessible, we can use an IDE like VS Code and install extensions like Angular Language Service.
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 scatterplotAppng serve scatterplotApp
We will open another terminal and install ChartJs by entering the following command.
npm install chart.js
Let us now create the component for our chart. To do so, use the following command.
ng generate component scatterplot
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.
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>
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
chartvariable as public. The first function will be angOnInitfunction that runs when the class's constructor is called. This function will contain a function call to our second function. The second function calledcreateChartwill create the chart that we require.
import Chart from 'chart.js/auto';// rest of the codeexport 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 chartdata: {// values on X-Axislabels: [],datasets: [{ label: "", data: [''],},{ label: "", data: [''],}]},options: { aspectRatio:2.5}});}}
Lastly, we need to add the HTML selector of our line chart to the "app.component.html" file.
<app-scatterplot></app-scatterplot>
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.
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.
