How to create a bar chart using ChartJs in Angular
Angular is a TypeScript-based free, open-source framework developed by Google. It 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, which is a free, open-source JavaScript library for data visualization in the form of 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
barchartAppwith any name we like. After we enter this, we need to enable routing and select CSS as our style.
ng new barchartApp
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 barchartAppng serve barchartApp
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 barchart
Everything is set up now. The next step will be to add data to our chart elements and components.
Creating a bar chart
Now that we have our components let us add the data in the specific files.
First, we will open our "barchart.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 "barchart.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 BarChartComponent implements OnInit {constructor() { }ngOnInit(): void {this.createChart();}public chart: any;createChart(){this.chart = new Chart("MyChart", {type: 'bar',data: {// values on X-Axislabels: [],datasets: [{ label: "", data: [''],},{ label: "", data: [''],}]},options: { aspectRatio:2.5}});}}
Lastly, we need to add the HTML selector of our bar chart to the "app.component.html" file.
<app-barchart></app-barchart>
We have finished creating our file bar 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 Packaging Industry of Pakistan.
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. 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.
