How to make a simple bar chart with Angular

In this article I will show you how to create a simple bar chart using Angular.

A bar chart is a diagram used to compare different values, where the larger bars represent higher values.

Bar charts are also known as column charts and can be either horizontal or vertical. They are ideal for demonstrating differences in values or sizes between various items.

We will create a horizontal bar chart.

Creating Angular Projects With Angular CLI

First let’s create a new project called GraficoBarras-Angular using:

ng new GraficoBarras-Angular

Add a new component to the application

Let’s first add a new component to the application by executing:

ng generate component grafico-barras

Creating a model for the bar chart

In the app folder of our project we will create another folder called “Model”.

Then inside the folder we just created let’s create a file for our model called “grafico.model.ts”, as shown in the image below:

Folder and model for the bar chart

Let’s add the following code to our file “grafico.model.ts”:

• Value: is the numerical value of our bar.
• Color: is the color for our bar.
• Size: is the size or percentage that the bar will have on the chart.
• Legend: is the caption for our bar.

Adding HTML to our chart

Let’s add the html to the component’s “grafico-barras.component.html” file that we created:

content is the div that will group our bars and will define the maximum height

<div class="content">

div “content”

bars is the div that will contain the bar and the bar value

<div class="bars" *ngFor="let item of List">            
     <span>{{item.Value}}</span>            
     <div class="bar" [style.background-color]="item.Color" [style.height]='item.Size'></div>        
</div>

div “bars”

Adding style to our component

Now let’s add a style to our component:

• $Largura-Barra: is the width of the bar.
• $MaxHeight: is the maximum height that the bar will reach.

Adding the code to feed our graph

in the grafico-barras.component.ts file of our component we will add the following code:

First we import our model grafico.model.ts. We also import the Input to receive the list with our data:

import { Component, OnInit, Input } from '@angular/core';

And then we create an Input for the list:

@Input() List: Array<GraficoModel>;

• Total: is the sum of all the values in the list.
• MaxHeight: is the maximum height that a bar can reach.

Finally we created the method called MontarGrafico() that will feed our chart:

• First we call this method in ngOnInit():

ngOnInit(): void {    this.MontarGrafico();  }

• Within the MontarGrafico() method we calculate the total by adding all the values:

this.List.forEach(element => 
{      
   this.Total += element.Value;    
});

• Finally, we calculate the size of each bar using the following calculation: (Value*MaxHeight)/Total

this.List.forEach(element => {      
element.Size = Math.round((element.Value*this.MaxHeight)/this.Total) + '%';    
});

Using the component

In the file app.component.html we will add in our component:

<app-grafico-barras [List]='Animals'></app-grafico-barras>

Then we will import our grafico.model.ts model into the app.component.ts file

import {GraficoModel} from "./Model/grafico.model";

Finally, let’s create an Array called Animals:

To execute use

ng serve

The project is available on github for contributions and improvements.

AlfredoVidinhas/GraficoBarras-Angular