Purpose of the article: Unlock the potential of Angular and ng2-charts as we explore the art of data visualization. This article will walk you through the key steps of integrating and customizing charts in Angular applications, enabling you to craft visually striking and interactive visualizations. Whether you’re new to Angular or a seasoned developer, this in-depth guide will help you fully leverage Angular for efficient and compelling data representation. Elevate your development expertise and gain a solid understanding of creating dynamic, informative, and aesthetically engaging charts using Angular.
Intended Audience: Angular developers looking for robust and customizable charting solutions for dynamic data visualization. Whether you’re a beginner seeking an easy-to-follow implementation or an experienced developer in search of advanced charting features, this guide will cater to all skill levels.
Tools and Technology: vscode
Keywords: chart.js, ng2-charts.
What is Chart.js?
Chart.js is an open-source library that permits us to draw various kinds of diagrams like a bar, radar, and pie utilizing the canvas element.
Below are the steps:
Step (1): Setup project and Installations
Step (2): Create components
Step (3): Implementation of charts
Step (4): Routing configurations
Step (5): Check final result
Step (1): Setup project and Installations
Create a project
To create a project, you must execute the command below.
ng new <project_name>
ex: ng new example
Installations:
Ng2-chart and chart.js
Install chart.js and ng2-chart with the commands below.
npm install ng2-charts –save
npm install charts.js –save
Bootstrap
We are using bootstrap classes, so we need to install bootstrap by using the following command.
Npm install bootstrap
Importing charts module
We need to import the NgChartsModule is shown below.
// mixin for color class generator
@mixin color-class-generator($classNamespace, $colors, $property) {
@each $name, $color in $colors {
.#{$classNamespace}#{$name} {
#{$property}: $color !important;
}
}
}
Step (2): Create components
Before we create a component, we add a basic HTML structure in app.component.html.
// mixin for color class generator
@mixin color-class-generator($classNamespace, $colors, $property) {
@each $name, $color in $colors {
.#{$classNamespace}#{$name} {
#{$property}: $color !important;
}
}
}
Create a component
We need to create a different component in our project by using the following command:
ng generate component <component-name>
ng g c bar-chart
ng g c doughnut-chart
ng g c pie-chart
ng g c polar-area-chart
Step (3): Implementation of charts
In our project, we need to discuss four charts – bar chart, doughnut chart, pie chart, and polar-area chart. Let us discuss them one by one.
Bar-chart
Let’s start by including a bar chart in your project. Let’s proceed to its implementation now that the bar chart component is configured.
Enter the following code after opening the bar-chart.component.html file:
// Define a map of color names to their values
$color-map: (
primary: #68b0da,
secondary: #1c2f72,
tertiary: #aaaaaa,
info: #3183e3,
danger: #eb5757,
warning: #ffd525,
success: #27a360,
pending: #F2994A,
accent1: #FF0092,
accent2: #FC6736,
dark-grey: #595959,
black-text: #1A1A1A,
grey-para: #737373,
);
Here is a canvas element with bar chart directives added. Additionally, the class members were added to the implementation of the class bar-chart component in bar-chart.component.ts and are bound to the attributes datasets, labels, and legend.
// Usage of the mixin to generate color classes
@include color-class-generator (color-, $color-map, color);
@include color-class-generator (bg-, $color-map, background-color);
Doughnut-chart
Let’s implement the second example in our project.
Let’s add the following code to the doughnut-chart.component.html file.
.bg-primary {
background-color: #68beda !important;
}
.bg-secondary {
background-color: #1c2f72 !important;
}
.bg-tertiary {
background-color: #aaaaaa !important;
}
.bg-info {
background-color: #3183e3 !important;
}
.bg-danger {
background-color: #eb5757 !important;
}
.bg-warning {
background-color: #ffd525 !important;
}
.bg-success {
background-color: #27a360 !important;
}
.bg-pending {
background-color:#F2994A !important;
}
This is the typescript code added to the doughnut-chart.component.ts file.
<h6 class="fm-poppins category-title fw-normal fs-10 lh-14 color-dark-grey">
Projects
</h6>
Pie-chart
Let’s implement the third example in our project.
The HTML code for the pie chart is attached. This code needs to be included to the pie-chart.component.html file.
<h6 class="fm-poppins category-title fw-normal fs-10 lh-14 color-dark-grey">
Projects
</h6>
And add the typescript code into the pie-chart.component.ts file as shown below.
<h6 class="fm-poppins category-title fw-normal fs-10 lh-14 color-dark-grey">
Projects
</h6>
Polar-area-chart
Implement the Fourth example in our project.
Here is the HTML code of the polar-area chart. We need to add this code to the polar-area-chart.component.html file.
<h6 class="fm-poppins category-title fw-normal fs-10 lh-14 color-dark-grey">
Projects
</h6>
And add the typescript code into the polar-area-chart.component.ts file as shown below.
Conclusion
Through a mixin for color class generation with the $color-map, it provides an enormous value with regards to streamlining color management using SCSS. One does not need manual utility-class generation anymore. Everything can be kept kept clean, scalable, consistent, and CSS-friendly within your projects. Desirable and effective, this approach works well for both design systems and single-page applications.
Implementing it in project/s will save from having to write repetitive color classes again.
Author Bio:
Divya Vasupalli
Software Engineer -UX/UI-Digital Transformation
I am a UI/UX Developer with 4 years of experience. I have extensive experience in front-end development technologies like HTML5, CSS3, JavaScript, Bootstrap and Responsive design, wordpress, tailwind. I have contributed to successful projects like MOURI Treasure, MMG, StorageVault, ATNi Logic communications, Roche PCS global etc.
