This is part 3 of a 4 part series regarding how to create charts in Ionic 4 apps. In this Part 3, you’ll learn how to create various types of Charts using HighCharts in Ionic 4 Apps and PWA
(Part 1 — Adding Charts in Ionic 4 apps and PWA : Part 1 — Using Chart.js)
(Part 2 — Adding Charts in Ionic 4 apps and PWA : Part 2 — Using D3.js)
(Part 4 — Adding Charts in Ionic 4 apps and PWA : Part 4 — Using Google Charts)
In these posts, you’ll learn how to add and play with different types of charts in Ionic 4 apps. We will explore several alternatives for Charting i.e. Chart.js, D3.js, Highcharts, GoogleCharts and others.
Complete source code of this tutorial is available here — Ionic-4-highcharts
What is Ionic 4
I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in every blog.
Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.
In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.
What is HighCharts
Highcharts is a pure JavaScript based charting library meant to create interactive charts in web applications. Highcharts provides a wide variety of charts, similar to ChartJS. For example, line charts, spline charts, area charts, bar charts, pie charts and so on. This post will explain the basics of Highcharts along with examples. You can find a few demo examples below.
In user rankings, HighCharts ranks in top 5 charting libraries, and for good reasons. Here are some advantages with HighCharts
- Provides 20 different types of charts to choose from, and it is easy to combine these as well
- Lots of good examples available, along with clear documentation
- It has a great community, so if you get stuck you’ll find help easily
But there are some downsides of HighCharts as well
- HighCharts is not entirely free. It is paid for commercial purposes and the license starts from $510 for single developer 😐
Nevertheless, it is a great charting library and in this post, we’re going to explore how easily we can create various charts in HighCharts.
Structure of the post
We’ll go about the post in a step-by-step manner
- Create a basic Ionic 4 app
- Add HighCharts to the app
- Create your first basic Bar Chart with HighCharts — understand concepts
- Create simple Pie Chart with HighCharts
- Create more advanced charts
- Test your app on Android
Complete source code of this tutorial is available here — Ionic-4-highcharts
Step 1 — Create a basic Ionic 4 app
I have covered this topic in detail in this blog.
In short, the steps you need to take here are
- Make sure you have node installed in the system (V10.15.3 at the time of this blog post)
- Install ionic cli using npm (my Ionic version is 4.12.0 currently)
- Create an Ionic app using
ionic start
You can create a sidemenu
starter for the sake of this tutorial. On running ionic start ionic-4-highcharts sidemenu
, node modules will be installed. Once the installation is done, run your app on browser using
$ ionic serve
The app will launch on browser. You can go to Inspect → Device Mode to see the code in a mobile layout. Next we’ll add the HighCharts library to our app.
Step 2 — Add HighCharts to the app
To create charts/visualizations you need to add HighCharts library to the app. Add the library from npm package
npm install highcharts --save
This will install the library in your node modules. Now you can import different modules of the library in your page using import
syntax. You can import HighCharts in your pages and components using
import * as HighCharts from 'highcharts';
That’s it ! You are ready to use HighCharts in your app and PWA pages.
Step 3 — Create basic Bar chart with HighCharts
HighCharts uses HTML5 / CSS and SVGs (internally) to create charts and visualizations in HTML5. You’ll also see a highcharts.com
marker at the bottom of each map.
We will add a simplediv
in the HTML page of our app’s page, and access that div
in the page.ts
file to include our chart. We don’t have to manipulate any SVGs ourselves, as HighCharts takes care of it automatically. That’s the benefit of HighCharts over Chart.js (SVGs) and D3.js (don’t have to manipulate SVGs manually).
Let’s add a simple div
element in HTML called barChart
Next we’ll import HighCharts in bar.page.ts
page. Here we’ll also access the highcharts
div in HighCharts’s method, and then provide our data and chart options. Complete code to create a simple bar chart would be
You can see creating charts in HighCharts is pretty similar to Chart.js, and it gives the benefit of SVGs with that. Let’s see some of the options
- Chart → type — defines the type of the chart
- Title — gives the chart title, no extra css required
- xAxis, yAxis — Axes options
- xAxis → categories — To define columns of bar chart
- series — data of the chart
Important — At present, for each chart series data, you need to add type: undefined
, otherwise the code just doesn’t work. You are supposed to enter the correct type of the series data, but I’m still figuring this one out.
The Bar chart will look like this. Pretty cool, right !
It’s pretty easy to create Stacked bar chart and bar chart with negative values as well. HighCharts takes care of most of the things itself.
For stacked bar chart, you need to add this to HighCharts option JSON
plotOptions: {
series: {stacking: 'normal'}
}
For negative value bar chart, you don’t have to do anything. HighCharts takes care of negative values automatically.
There are other cool features you can implement in bar charts using HighCharts like
Fixed Placement Columns
Column Range Charts
Step 4 — Create basic Pie chart with HighCharts
Pie chart creation is very similar to Bar chart in HighCharts. Simply change a few options and you are good to go.
Create a div
element with id pieChart
in your HTML. Then the complete TS code for a sample Pie chart will look like following
The Pie chart will look this
There are other cool features you can implement in pie charts using HighCharts like
Monochrome Pie Chart
Polar Area Chart or Variable Radius Pie Chart
Step 5 — Create basic Scatter chart with HighCharts
Creating scatter chart in HighCharts is as easy as creating any other chart. Just pick the correct div
from the DOM and add HighCharts options to it. HighChart creation options will look like following
You’ll notice the major difference are in chart type
chart: {
type: 'scatter',
zoomType: 'xy'
},
and plotOptions
now has
scatter → marker → radius options
Other than that, all options remain general. The scatter plot will look like following
Step 6 — Create Dynamic charts with HighCharts
Another good feature in HighCharts is that it can very well handle dynamic charts. Let’s take a simple example where a new point is added to a line chart every second.
For this, we can use events
option of HighCharts option JSON. In events
, we call load
function, and write our data fetching logic inside it. For demo purpose, we’ll create new points randomly at set intervals. In a real scenario, this will be replaced by an API response or socket response.
events: {
load: function () {
// set up the updating of the chart each second
}
}
We’ll create a Spline chart with dynamic data. Spline chart is not covered in this blog, but you’ll see it is pretty similar to other charts. Complete code to create a dynamic spline chart is as follows
Note some important things in this chart
- type : ‘spline’ — creates spline chart
- animation : true — allows animation
-
events → load — function loads new point in the dataset every 1 second with
series.addPoint()
- Initial data is also created randomly
The resultant dynamic spline chart looks like following
Step 6 — Test your app in Android and as PWA
We have already tested the above HighCharts charts in browser. If you have carried out the above steps correctly, Android build should be a breeze.
Run the following command to create Android platform
$ ionic cordova platform add android
Once platform is added, run the app on device (Make sure you have a device attached to the system).
$ ionic cordova run android
Once your app is up and running on the device, you can start testing all the functions.
Other cool charts possible in HighCharts
HighCharts has many other features and types of charts which you can create as easily as you created the above charts
Bubble Charts
Along with simple bubble charts, you can also create packed bubble charts like this one
Heat and Tree Maps
3D charts
Gauges
You can also create different styled gauges in HighCharts as well
Conclusion
In this post we learnt how to create simple charts using HighCharts in Ionic 4 apps and PWA. Since HighCharts is amazingly easy, you need to take very little effort to create a large variety of charts. The documentation on HighCharts website is good enough to simulate any type of chart in your projects.
In next post of this series, we’ll learn how to create charts in Ionic 4 using Angular Google charts and other libraries.
Complete source code of this tutorial is available here — Ionic-4-highcharts
Also check out other posts of this series,
(Part 1 — Adding Charts in Ionic 4 apps and PWA : Part 1 — Using Chart.js)
(Part 2 — Adding Charts in Ionic 4 apps and PWA : Part 2 — Using D3.js)
(Part 4 — Adding Charts in Ionic 4 apps and PWA : Part 4 — Using Google Charts)
— — — — — — — — — — — — — — — — — — — — — — — — — — -
Buy “Ionic 4 Chart App Starter — Ion Chart” today!!
— — — — — — — — — — — — — — — — — — — — — — — — — —
Next Steps
Now that you have learned the implementation of HighCharts for charting in Ionic 4, you can also try
- Ionic 4 PayPal payment integration — for Apps and PWA
- Ionic 4 Stripe payment integration — for Apps and PWA
- Ionic 4 Apple Pay integration
- Twitter login in Ionic 4 with Firebase
- Facebook login in Ionic 4 with Firebase
- Geolocation in Ionic 4
- QR Code and scanners in Ionic 4 and
- Translations in Ionic 4
If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App
Top comments (0)