Angular Charts
By: Dayana Jabif
Tags: Visualization, Angular, Charts, JavaScript, Programming

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.