Skip to content

📈 Learn how to build advanced Ionic charts and visualizations using the best Ionic Angular charting libraries (ngx-echarts, ng2-charts, ngx-charts).

Notifications You must be signed in to change notification settings

ionicthemes/how-to-build-any-ionic-chart-or-visualization

Repository files navigation

How to build any Ionic chart or visualization in four easy steps

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.

Watch the video


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).

Demo

Install dependencies

To run this code sample, first install the npm dependencies

npm install

Run the app

And then run the app in your Browser

ionic serve

Get a premium Ionic Starter App

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.