Angular Charts
How to choose your angular charting library?
We are living in a visual era, so it may not surprise you to see different types of visualizations widgets such as charts, graphs, tables and many others in almost every website and mobile app you visit. The main purpose of visualizations is to help displaying data in a visual, lively, sexy and summarized way.
In Fully — Angular Admin Template, we designed and developed many beautiful visualization widgets that developers can reuse when building they Angular apps. In this particular post, we will discuss about charts and graphs in Angular projects.
A chart is a graphical representation of data, the data is represented by symbols, such as slices in a pie chart, bars in a bar chart or lines in a line chart.
As developers, we can take advantage of charts in situations where a simple table won’t adequately demonstrate important relationships or patterns between data points. The main goal of a chart is to display data and invite the user for a further exploration of a topic.
How to choose your angular charting library?
f you perform a quick search in google, you will find many different angular charting libraries. So, how to choose which one to use?
The hard part is taking into consideration the many aspects that will lead you to choose the right library for the use case.
It’s tempting to go straightforward, pick the library that has the most stars on GitHub, install it with npm and voilà.
Don't want to be a party pooper, but there's much more in between.
Things you need to consider:
SVG or Canvas?
You first need to understand the nature of the use case you have in mind to choose the underlying technology.
Are you going to use SVG or Canvas based charts? Each has its pros and cons, more on that later.
Angular friendly?
Secondly, you should search for up to date libraries that work seamlessly with Angular (latest Angular, not AngularJS or Angular 2).
What about the license?
Most libraries are free and open source, but others don’t. Depending on your project and budget, the pool of options available. For example, there are some great libraries like Highcharts and Zingchart, but you have to buy a license in order to use them.
Up to date
Don’t forget to look at the library’s GitHub activity (number of stars, date of last commit, future plans, etc). This isn’t decisive but it’s good to start with a library that show signs of being well maintained with planned enhancements and new features down the road.
Get to know the limitations
Not all charting libraries provide the full set of visualizations such as 2D, 3D, map, scientific, financial, and statistical charting. Also, some provide great customization, others don’t.
Depending on how elaborate is your use case you should target for libraries that enable advanced customization or more simple ones that provide less configuration options.
Are you planning on supporting legacy browsers? That may be a bummer for some libraries.
Start building the visualization
Are you going to build the visualization from the ground up or start from the closest example you find in the charting library documentation page?
Either way you will need to deep dive into the library’s documentation and crunch a bit.
This is when you will fall in love or hate the documentation page of each charting library under consideration.
Customization
Again, depending on the complexity of your chart design, and the library you choose whether you will be able to implement your visualization easily or going to spend quite some hours figuring out the nasty little quirks.
Do you have in mind any custom interaction? Hovers, clicks, loaders or maybe merge the chart with some html to enhance the overall visualization.
Data integration
Once you have a UI and UX you are comfortable with, you need to take care of the data source, fetching technique and integration with your Angular services.
Are you also considering adding filters to your data source? That’s a whole different story and it may as well be time consuming.
Clean code
Every developer prefers to work with understandable, extendable, clean and tidy source code. You should spend some time ensuring future collaborators can extend your work seamlessly.
Final tweaks
Did your ensure your visualization is responsive?
As you can see, there’s a ton more going on after running
npm install. On average, it took us around 20 hours of skilled designers and developers to build each visualization for our latest Angular Dashboards Template.
Considering it includes 25 visualizations, that’s around $30.000 worth of skilled developers just for the visualizations.
When building Fully — Angular Admin Dashboard Template, we followed the process described above, tried many charting libraries, built some proof of concepts, and finally implemented not just one but a set of Angular chart libraries because we acknowledge there are users with a wide range of requirements.
The set of charting libraries we packed into Fully Angular Template feature both SVG and Canvas based options to satisfy different scenarios, detailed UI/UX customizations, real time or large amount of data, responsiveness, etc.
Not to mention we carefully ensured each library works well with our Angular code base.
That’s why we felt motivated to create this Angular Charts Guide to help other developers like you deciding how to add charts to your angular applications.
The right tool for the job
At a lower level, there are basically two graphic primitives that charting libraries are built upon:
- Bitmap graphics that rely on pixels to represent images
- Vector graphics that rely on geometric shapes to represent images
Both underlying graphic primitives have its abstraction technology. Canvas relies on bitmaps and SVG on vectors.
Canvas Charts
The Canvas specification defines objects, methods, and properties to draw and manipulate graphics using a <canvas/> HTML element.
Canvas uses a "fire and forget" model, there is no DOM that can be referenced once an element has been drawn. This is a drawback in terms of interactivity.
SVG Charts
On the other hand, the SVG specification defines the features and syntax for a modularized language for describing two-dimensional vector graphics using XML.
SVG typically creates a DOM node per point. This is great for flexibility on UI/UX customization and interactivity because programming languages can connect to the page and easily make changes to the structure, style and content of the visualization.
Initially, having every element available in the DOM seems beneficial, however the browser is constantly re-computing every element which leads to a slowdown impacting performance. Since Canvas doesn't have the memory of every element that SVG has, it's quick and easy when we need to draw thousands of data points.
Note: Most charting libraries are either based on a Canvas or SVG rendering engine. That’s why, when choosing between them, you will reduce the charting libraries options considerably.
We come up with a flow chart to help you analyze the critical aspects of your use case to start crossing out charting library options.
Best Angular Chart Libraries
We tried different charting libraries and stuck with the ones that meet the requirements listed above.
We choose different libraries, based on both SVG and Canvas, to provide a wide range of options for the different use cases that may arise when building an Angular dashboard.
Without further ado, here are our top three picks in order of preference:
They all have similar names, (and that’s confusing, at least for me), but they are all based on different underlying charting libraries and provide distinct opinionated Angular wrapper directives.
In terms of popularity we need to assess the different charting libraries they are based on.
Both Echarts and Charts.js are based on Canvas to draw the visualizations. They have healthy GitHub repositories and differ a bit by the amount of built-in chart types available and the customization options they provide.
We found that Echarts provides more chart types with deeper customization options than Charts.js. Though, they are both great alternatives, that’s why we included chart examples of both of them.
On the other hand, D3.js is mainly based on SVG, thus the building blocks and customization is closely related to SVG nodes manipulation. D3.js has probably the widest set of chart types available among the three options discussed here, but the customization is notoriously harder.
We believe that’s a no-go for many users with simple use cases and that’s why we didn’t place it in the first spot. We really felt the need to include an advanced SVG based option for advanced use cases, and found ngx-charts the best alternative in this category.
Worth to mention:
- HighCharts and Zingchart are great alternatives, but unfortunately they are not open source. You can use them for free for non commercial purposes. Otherwise you need to buy a license. Again, this is a no-go for many of our users, that’s why we didn’t proceed evaluating them.
- ng2-nvd3 (another Angular wrapper for D3.js) was once very popular, but its GitHub repository has been stuck for quite some time. ngx-charts was a clear winner over this alternative.
- I’m very curious about trying out billboard.js as another option that’s based on D3.js. For the moment, I haven’t found the time nor a proper Angular wrapper to continue assessing it.
Check the complete tutorial to see the Pros and Cons of each of these charting libraries as well as some code examples.
Angular Charts Examples
Before wrapping up this charting angular guide I would like to show you some nice examples you can build with the above mentioned libraries.
Sparklines in Angular apps:
This super cool sparklines or minicharts are very useful to summarize a trend.
Line charts in Angular:
Line charts are useful to show changes over periods of time. Line graphs can also be used to compare changes over the same period of time for more than one group of data.
Pie charts in Angular:
Pie charts are mainly used for comparing the proportions of different categories.
Doughnut charts in Angular:
The Doughnut Chart is similar to the pie chart. It’s also used to express a “part-to-whole” relationship where all pieces together represent 100%. Some visualization experts say that this type of charts are more efficient than the pie charts because they are easier to read.
Bar Charts in Angular:
The purpose of a Bar chart is to compare different sets of data through the height of a bar. For this example I included a video so you can also see the chart’s animations.
Angular Charts Summary
When it comes to implement visualizations and charts in Angular there are plenty of considerations before you start writing the first line of code.
We carefully reviewed many of the charting libraries available and shared our analysis on the top three Angular chart libraries.
In this post we exposed all the gotchas for you to make an informed decision and avoid underestimating the effort of building visualization use cases in Angular. Depending on the complexity and detail of your use case, you can easily spend +40 hours worth of experienced developers on the task. Read the complete post.
For all of you out there with a tight budget or schedule, we packed plenty of examples using the top three Angular charting libraries in our latest Fully — Angular Admin Template. By including different libraries we ensure covering many different use cases.
Any other library you think we should consider? Leave me a message!
