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.
Ngx-charts is a unique charting library that is integrated with Angular. It uses Angular to render and animate the SVG elements and uses
Ngx-charts support a multitude of charts with the added functionality of multi-chart combo charts. Let us explore which charts are supported and when they are best used.
Types | Best Applications |
Horizontal and Vertical bar chart | Comparing categories with a single data series |
Grouped Bar Chart | Comparing multiple data series within each category |
Stacked Bar Chart | Showing the total and part-to-whole relationships |
Normalized Bar Chart | Comparing relative proportions within categories |
Line Chart | Showing trends or changes over time |
Area Chart | Showing trends and the part-to-whole relationship |
Stacked Area Chart | Showing cumulative trends and part-to-whole |
Normalized Area Chart | Comparing relative proportions over time |
Pie Chart | Showing part-to-whole relationships in a single data |
Explodable Pie Chart | Highlighting specific segments in a part-to-whole |
Grid Pie Chart | Comparing multiple pie charts in a grid |
Custom Legends Pie | Adding custom legends to a pie chart |
Donut Chart | Showing part-to-whole relationships with a hole |
Gauge Chart | Representing a single value within a range |
Linear Gauge Chart | Showing linear progress or measurement |
Heatmap | Displaying data values using color intensity |
Treemap | Visualizing hierarchical data and proportions |
Number Cards | Displaying single, significant numbers |
Bubble/Scatter Chart | Showing relationships between two or more variables |
Vertical Box Chart | Displaying distribution and spread of data |
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 barchartApp with 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 ngx-charts by entering the following command.
npm install @swimlane/ngx-charts --save
Everything is set up now. The next step will be to add data to our chart elements and components.
Let us open the IDE code to add our data elements.
Open the "app.module.ts" file and add the following code to setup its import modules and imports.
// rest of importsimport { NgxChartsModule }from '@swimlane/ngx-charts'; // addedimport { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // added@NgModule({// rest of modulesimports: [BrowserModule,AppRoutingModule,BrowserAnimationsModule, // addedNgxChartsModule // added]})export class AppModule { }
Now we will open the "app.components.ts" file and add our data.
// rest of codeexport class AppComponent {title = 'barchartApp';dataset = [{ name: "X", value: 1 },{ name: "Y", value: 2 }];}
Ngx-charts provide various components to generate different graphs. For this example, we will use HTML for a vertical bar chart.
<ngx-charts-bar-vertical[view]="[1000,400]"[results]="dataset"[xAxisLabel]="'x-axis'"[legendTitle]="'legend'"[yAxisLabel]="'y-axis'"[legend]="true"[showXAxisLabel]="true"[showYAxisLabel]="true"[xAxis]="true"[yAxis]="true"[gradient]="true"></ngx-charts-bar-vertical>
If you encounter any d3 errors, run the following command.
npm install --save-dev @types/d3-shape @types/d3-scale @types/d3-selection
We have finished creating our 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.
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}
Note: Data taken from Wikipedia.
Ngx-charts is a powerful tool that provides users with many charts and visualizations. This diverse range of charts, coupled with interactivity and responsiveness, makes a smooth and cleaner experience for its users. Moreover, its customizability and ease of use make it a relatively straightforward tool in data visualization. The vast array of chart types and the tool's usability allow for a better overall experience.
Note: To learn about another charting library in Angular, check out this Answer.
Free Resources