Charts
Charts are super useful to show results in a visual way. Use them in your dashboards or reports from your Angular applications.
In this template we integrated 3 different libraries of charts. All of them are fully compatible with Angular and provide good flexibility and customizability.
We included examples of different types of charts such as bars, lines, pies, doughnut and area charts. All of them can be customized to your needs.
How to choose your angular charting library?
If 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 this angular admin template.
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 an Angular Charts Guide to help developers decide how to add charts to your angular applications.
Ngx-echarts - Angular wrapper for Echarts
ngx-echarts is an open source Angular directive for echarts. We really love this library because it allows you to customize every single detail from every chart. Also, its documentation is super complete and includes lots of examples. It provides a beautiful API that make this charts library super flexible and customizable.
ECharts is an incubator project of the Apache Software Foundation. This was a key aspect for preferring this charting library over the others in the list.
ECharts is a pure JavaScript visualization tool, which can run fluently on desktop and mobile devices and is compatible with most modern web browsers. ECharts depends on ZRender, a graphic rendering engine, to create intuitive, interactive, and highly-customizable charts.
ECharts provides a wide range of chart types such as line series, bar series, scatter series, pie charts, candle-stick series, boxplot series for statistics, map series, heatmap series, lines series for directional information, graph series for relationships, treemap series, sunburst series, parallel series for multi-dimensional data, funnel series and gauge series. Also, it's extremely easy to combine them for advanced visualizations.
Useful links:
Ng2-charts - Angular directive for Chart.js
ng2-charts is an open-source angular directive for Chart.js, created by the Valor Team (if you are an angular bootstrap developer, you may know them for their popular library ngx-bootstrap).
This angular chart library offers eight types of built-in charts: line, bar, radar, pie, polarArea, doughnut, bubble and scatter. All of them are available using the same directive: baseChart.
Useful links:
Ngx-charts - Charting framework built on top of d3.js
ngx-charts is an open source declarative charting framework for Angular. It doesn't merely wraps D3.js, it uses Angular to render and animate the SVG elements with all of its binding and speed goodness, and uses D3 for the excellent math functions, scales, axis and shape generators, etc. This leaves out of the equation the possibility to render D3.js visualizations using canvas. ngx-charts is all about SVG.
The bright side of having Angular do all of the SVG rendering is that it opens endless possibilities the Angular platform provides such as Ahead Of Time compilation, Server Side Rendering, etc.
In terms of customization, ngx-charts provides great flexibility as it exports all the components and helpers used as building blocks for the charts. Things like legends, axes, dimension helpers, gradients, shapes, can be directly imported into your application and used in your angular components. This allows you to combine them and build custom charts that implement use cases that the default library's charts do not support.
Useful links:
Last updated