In this article, we’ve compiled a list of the best Angular chart and data visualization opensource libraries to help you better understand your options.
Table of Contents
ngx-charts
ngx charts is a Swimlane open-source project, ngx chart is a collection of data visualization charts. These include line/area/bar charts, heatmap, treemap, number Cards, contour plots, pie and donut charts, sunbursts, radar charts, parallel coordinates, and treemaps.
NPM package name : @swimlane/ngx-charts . This charts library has earned it a total of 4K stars on GitHub and a weekly volume of 1.16M npm downloads
- GitHub Stars : 4K
- Forks : 1.1K
- NPM : 120K Weekly Downloads
- Demo
Ngx charts render and animate the SVG elements with all of Angular’s binding and speed advantages. custom charts can be created by combining the various ngx charts components exposed by the ngx-charts module.
Key features of the best Angular charts : ngx charts library.
| Event handling | Data point Event Handlers |
| Responsive | Yes |
| Open Source | Yes |
| Dynamic | Allows to modify chart & Real-time data support |
| Compatability | Browsers and mobile platforms |
How to use ngx charts in angular component
Ngx charts, here’s an example of a “ngx-charts-bar-vertical” component dataset declared and initialized in the project’s component class Ts file.
export class AppComponent {
view: any[] = [700, 400];
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C']
};
// options
showXAxis = true;
showYAxis = true;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
data=[
{
"name": "Germany",
"value": 8940000
},
{
"name": "USA",
"value": 5000000
},
{
"name": "France",
"value": 7200000
}
];
constructor() {
}
// on select event
onSelect(event) {
console.log(event);
} The snippet above shows an example of ngx charts. In the example above.
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical> Google Charts
“google-chart” is Angular based open-source wrapper for Google Charts that enables attractive and feature-rich Google Charts visualizations within an Angular application and These include Line Charts, Area Charts, Pie Charts, and Sankey Chart
NPM package name : angular-google-charts. This chart library has earned it a total of 217 stars on GitHub and a weekly volume of 15K npm downloads.
- GitHub Stars : 217
- Forks : 68
- NPM : 15K Weekly Downloads
- Demo
Key features of the Google Chart library.
| Event handling | Yes (control the tooltip programmatically) |
| Responsive | Yes |
| Open Source | Yes |
| Dynamic | Allows to modify chart & data dynamically from server |
| Compatability | Browsers and mobile platforms |
How to use Google Charts in angular component
Here’s an example of a “google-chart” component dataset declared and initialized in the project’s component class Ts file.
export class AppComponent {
title = 'Browsers - google PieChart demo';
type = 'PieChart';
data = [
['Firefox', 15.0],
['IE', 16.8],
['Chrome', 30.8],
['Safari', 18.5],
['Opera', 6.2],
['Others', 0.7]
];
columnNames = ['Browser', 'Percentage'];
options = {
};
width = 400;
height = 400;
} <google-chart #chart
[title]="title"
[type]="type"
[data]="data"
[columnNames]="columnNames"
[options]="options"
[width]="width"
[height]="height">
</google-chart> C3 Charts
C3 charts is an open-source project and is a collection of data visualization charts. These include Timeseries Chart, Combination Chart, Line Chart with Regions, Stanford Chart, Bar Chart, Pie Chart, and Step Chart.
NPM package name: C3. This charts library has earned it a total of 9.1K stars on GitHub and a weekly volume of 87K npm downloads.
- GitHub Stars : 9.1K
- Forks : 1.5K
- NPM : 87K Weekly Downloads
- Demo
Key features of the C3 Charts library.
| Transform | To Line Chart, To Pie Chart, and To Spline Chart |
| Interaction | Sub chart and Zoom feature |
| Responsive | Yes |
| Open Source | Yes |
| Data | Load data dynamically,Data Label Format and Data from URL |
| Compatability | Browsers and mobile platforms |
How to use C3 Charts in angular component
Here’s an example of a “C3” component dataset declared and initialized in the project’s component class Ts file.
export class AppComponent {
ngAfterViewInit() {
var chart = c3.generate({
bindto: '#splinechart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'spline'
}
});
} <div id="splinechart"></div> Other top best angular charts
Highcharts – Framework for commercial charts
Plotly – provides commercial business intelligence and data science.