Learn how to build advanced charts and visualizations using the best Ionic Angular charting libraries.
There are many charting libraries, and sometimes it's hard to decide which one to use.
I reviewed all of them and build code examples with the top three I liked the most.
I will be building one basic yet complete Ionic chart using the top three Ionic charting libraries.
The chart example features a line chart with different data sets, and some Ionic controls to interact with the chart. These controls can be used to filter data, toggle the different data sets shown in the chart and dynamically change some properties of the visualization.
By default, almost every charting library comes with built-in controls to interact with the chart. This is not bad at all, but when designing a mobile app you can greatly improve the user experience if you own the different pieces of the UI. That’s why I believe it’s important to show you how to interact with the chart using Ionic controls instead of the ones built-inside the charting library.
This repo is part of an Ionic tutorial where we explain how to build advanced charts and visualization with Ionic and Angular. This tutorial explains how to use, customize, and extend the top three Ionic Angular charting libraries (ngx-echarts, ng2-charts, ngx-charts).
To run this code sample, first install the npm dependencies
npm install
And then run the app in your Browser
ionic serve
Did you know that we recently released Ionic Full Starter App? It's an Ionic Angular template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.