Adding Charts in Ionic 4 apps and PWA: Part 3 — Using HighCharts
Tags: ionic, charts, highcharts, pwa
Published: 2020-03-25 21:04:40

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="351e" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="36b9" class="graf graf--p graf-after--figure">This is part 3 of a 4 part series regarding <strong class="markup--strong markup--p-strong">how to create charts in Ionic 4 apps. </strong>In this Part 3, you’ll learn how to create various types of Charts using HighCharts in Ionic 4 Apps and PWA</p><blockquote name="7afa" class="graf graf--blockquote graf-after--p">(Part 1&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 1&#8202;—&#8202;Using Chart.js</a>)<br>(Part 2&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 2&#8202;—&#8202;Using D3.js</a>)<br>(Part 4&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 4&#8202;—&#8202;Using Google Charts</a>)</blockquote><p name="6d65" class="graf graf--p graf-after--blockquote">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.</p><blockquote name="61c0" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-highcharts"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-highcharts</strong></a></blockquote><h3 name="524c" class="graf graf--h3 graf-after--blockquote">What is Ionic&nbsp;4</h3><p name="e21e" class="graf graf--p graf-after--h3">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.</p><p name="a6fd" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Ionic</strong> 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.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. 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.</p><h3 name="12c3" class="graf graf--h3 graf-after--p">What is HighCharts</h3><p name="2eeb" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Highcharts</strong> 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.</p><figure tabindex="0" contenteditable="false" name="caf2" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 327px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.7%;"></div><img class="graf-image" data-image-id="1*67n0Lun2wGk1dwAr7tiw_Q.png" data-width="965" data-height="451" src="https://cdn-images-1.medium.com/max/720/1*67n0Lun2wGk1dwAr7tiw_Q.png"><div class="crosshair u-ignoreBlock"></div></div></figure><figure tabindex="0" contenteditable="false" name="07c8" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 373px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 53.2%;"></div><img class="graf-image" data-image-id="1*mZe-iHnvNKwYwfHixcvVcw.png" data-width="838" data-height="446" src="https://cdn-images-1.medium.com/max/720/1*mZe-iHnvNKwYwfHixcvVcw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="80ab" class="graf graf--p graf-after--figure">In user rankings, HighCharts ranks in top 5 charting libraries, and for good reasons. Here are some advantages with HighCharts</p><ul class="postList"><li name="8a0e" class="graf graf--li graf-after--p">Provides <a href="http://www.highcharts.com/docs/chart-and-series-types/chart-types"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">20 different types of charts</a> to choose from, and it is easy to combine these as well</li><li name="8c2a" class="graf graf--li graf-after--li">Lots of good examples available, along with clear documentation</li><li name="75bb" class="graf graf--li graf-after--li">It has a great community, so if you get stuck you’ll find help easily</li></ul><p name="4a79" class="graf graf--p graf-after--li">But there are some downsides of HighCharts as well</p><ul class="postList"><li name="3eef" class="graf graf--li graf-after--p">HighCharts is not entirely free. It is paid for commercial purposes and the license starts from $510 for single developer 😐</li></ul><p name="7f48" class="graf graf--p graf-after--li">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.</p><h3 name="bec3" class="graf graf--h3 graf-after--p">Structure of the&nbsp;post</h3><p name="36ca" class="graf graf--p graf-after--h3">We’ll go about the post in a step-by-step manner</p><ol class="postList"><li name="b1b2" class="graf graf--li graf-after--p">Create a basic Ionic 4 app</li><li name="f32b" class="graf graf--li graf-after--li">Add HighCharts to the app</li><li name="97a4" class="graf graf--li graf-after--li">Create your first basic Bar Chart with HighCharts&#8202;—&#8202;understand concepts</li><li name="6c4a" class="graf graf--li graf-after--li">Create simple Pie Chart with HighCharts</li><li name="ae28" class="graf graf--li graf-after--li">Create more advanced charts</li><li name="e86f" class="graf graf--li graf-after--li">Test your app on Android</li></ol><blockquote name="5a74" class="graf graf--blockquote graf-after--li"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-d3js"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-h</strong></a><strong class="markup--strong markup--blockquote-strong">ighcharts</strong></blockquote><h3 name="cd08" class="graf graf--h3 graf-after--blockquote">Step 1&#8202;—&#8202;Create a basic Ionic 4&nbsp;app</h3><blockquote name="b909" class="graf graf--blockquote graf-after--h3">I have covered this topic in detail in <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">this blog</a>.</blockquote><p name="ac57" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="1e8a" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.15.3 at the time of this blog post)</li><li name="1ae0" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.12.0 currently)</li><li name="508a" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="afc5" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">sidemenu</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-4-highcharts sidemenu</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="f473" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="5a2e" class="graf graf--p graf-after--pre">The app will launch on browser. You can go to <strong class="markup--strong markup--p-strong">Inspect → Device Mode</strong> to see the code in a mobile layout. Next we’ll add the HighCharts library to our app.</p><h3 name="e177" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Add HighCharts to the&nbsp;app</h3><p name="b479" class="graf graf--p graf-after--h3">To create charts/visualizations you need to add HighCharts library to the app. Add the library from npm package</p><pre name="6b0d" class="graf graf--pre graf-after--p">npm install highcharts --save</pre><p name="a09a" class="graf graf--p graf-after--pre">This will install the library in your node modules. Now you can import different modules of the library in your page using <code class="markup--code markup--p-code">import</code> syntax. You can import HighCharts in your pages and components using</p><pre name="586b" class="graf graf--pre graf-after--p">import * as HighCharts from 'highcharts';</pre><p name="4b0f" class="graf graf--p graf-after--pre">That’s it&nbsp;! You are ready to use HighCharts in your app and PWA pages.</p><h3 name="2135" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Create basic Bar chart with HighCharts</h3><p name="92ce" class="graf graf--p graf-after--h3">HighCharts uses HTML5 / CSS and SVGs (internally) to create charts and visualizations in HTML5. You’ll also see a <code class="markup--code markup--p-code">highcharts.com</code> marker at the bottom of each map.</p><p name="f43a" class="graf graf--p graf-after--p">We will add a simple<code class="markup--code markup--p-code">div</code> in the HTML page of our app’s page, and access that <code class="markup--code markup--p-code">div</code> in the <code class="markup--code markup--p-code">page.ts</code> 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).</p><p name="ad12" class="graf graf--p graf-after--p">Let’s add a simple <code class="markup--code markup--p-code">div</code>element in HTML called <code class="markup--code markup--p-code">barChart</code></p><figure tabindex="0" contenteditable="false" name="20d6" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/376ec52b500661397fac5a292347bc0b.js %}</div></div></figure><p name="b8a3" class="graf graf--p graf-after--figure">Next we’ll import HighCharts in <code class="markup--code markup--p-code">bar.page.ts</code> page. Here we’ll also access the <code class="markup--code markup--p-code">highcharts</code> div in HighCharts’s method, and then provide our data and chart options. Complete code to create a simple bar chart would be</p><figure tabindex="0" contenteditable="false" name="4b3e" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/0bfc552c2ca84aacf7afb7bfc44d8845.js %}</div></div></figure><p name="e458" class="graf graf--p graf-after--figure">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</p><ul class="postList"><li name="7b87" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Chart → type</strong>&#8202;—&#8202;defines the type of the chart</li><li name="b1f2" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Title</strong>&#8202;—&#8202;gives the chart title, no extra css required</li><li name="6422" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">xAxis, yAxis&#8202;</strong>—&#8202;Axes options</li><li name="9189" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">xAxis</strong> → categories&#8202;—&#8202;To define columns of bar chart</li><li name="fbdb" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">series</strong>&#8202;—&#8202;data of the chart</li></ul><p name="9634" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Important</strong>&#8202;—&#8202;At present, for each chart series data, you need to add <code class="markup--code markup--p-code">type: undefined</code>&nbsp;, 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.</p><p name="c754" class="graf graf--p graf-after--p">The Bar chart will look like this. Pretty cool, right&nbsp;!</p><figure tabindex="0" contenteditable="false" name="2a0d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 391px; max-height: 658px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 168.3%;"></div><img class="graf-image" data-image-id="1*zgMi0vGi4FhOY4oFNIURjA.png" data-width="391" data-height="658" src="https://cdn-images-1.medium.com/max/720/1*zgMi0vGi4FhOY4oFNIURjA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple bar chart in HighCharts</figcaption></figure><p name="056b" class="graf graf--p graf-after--figure">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.</p><p name="0c0d" class="graf graf--p graf-after--p">For stacked bar chart, you need to add this to HighCharts option JSON</p><pre name="849d" class="graf graf--pre graf-after--p">plotOptions: {<br>   series: {stacking: 'normal'}<br>}</pre><figure tabindex="0" contenteditable="false" name="4edf" class="graf graf--figure graf-after--pre is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 392px; max-height: 589px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 150.29999999999998%;"></div><img class="graf-image" data-image-id="1*n6iOSaaZPakfjB4J35cFZw.png" data-width="392" data-height="589" src="https://cdn-images-1.medium.com/max/720/1*n6iOSaaZPakfjB4J35cFZw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="e929" class="graf graf--p graf-after--figure">For negative value bar chart, you don’t have to do anything. HighCharts takes care of negative values automatically.</p><figure tabindex="0" contenteditable="false" name="23bf" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 391px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 163.7%;"></div><img class="graf-image" data-image-id="1*e62r5gpky-kY203yE7LJmg.png" data-width="391" data-height="640" src="https://cdn-images-1.medium.com/max/720/1*e62r5gpky-kY203yE7LJmg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="fa3b" class="graf graf--p graf-after--figure">There are other cool features you can implement in bar charts using HighCharts like</p><h4 name="4d85" class="graf graf--h4 graf-after--p">Fixed Placement Columns</h4><figure tabindex="0" contenteditable="false" name="9ca3" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 300px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 42.8%;"></div><img class="graf-image" data-image-id="1*sUaWu2_5Hw_2c-_pPPSN0w.png" data-width="944" data-height="404" src="https://cdn-images-1.medium.com/max/720/1*sUaWu2_5Hw_2c-_pPPSN0w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="ff71" class="graf graf--h4 graf-after--figure">Column Range&nbsp;Charts</h4><figure tabindex="0" contenteditable="false" name="b637" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 299px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 42.699999999999996%;"></div><img class="graf-image" data-image-id="1*tM1MVu37B4ahVTYKNSP9jw.png" data-width="944" data-height="403" src="https://cdn-images-1.medium.com/max/720/1*tM1MVu37B4ahVTYKNSP9jw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="d2b0" class="graf graf--h3 graf-after--figure">Step 4&#8202;—&#8202;Create basic Pie chart with HighCharts</h3><p name="7d1d" class="graf graf--p graf-after--h3">Pie chart creation is very similar to Bar chart in HighCharts. Simply change a few options and you are good to go.</p><p name="fc94" class="graf graf--p graf-after--p">Create a <code class="markup--code markup--p-code">div</code> element with id <code class="markup--code markup--p-code">pieChart</code> in your HTML. Then the complete TS code for a sample Pie chart will look like following</p><figure tabindex="0" contenteditable="false" name="d9f6" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/0db863f6da8d6b383fec9839520671e7.js %}</div></div></figure><p name="1e79" class="graf graf--p graf-after--figure">The Pie chart will look this</p><figure tabindex="0" contenteditable="false" name="5214" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 553px; max-height: 509px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 92%;"></div><img class="graf-image" data-image-id="1*ZmMAl76Gw0RxT1-1th7_hA.png" data-width="553" data-height="509" src="https://cdn-images-1.medium.com/max/720/1*ZmMAl76Gw0RxT1-1th7_hA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Pie chart with HighCharts</figcaption></figure><p name="652c" class="graf graf--p graf-after--figure">There are other cool features you can implement in pie charts using HighCharts like</p><h4 name="6376" class="graf graf--h4 graf-after--p">Monochrome Pie&nbsp;Chart</h4><figure tabindex="0" contenteditable="false" name="c951" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 604px; max-height: 401px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.4%;"></div><img class="graf-image" data-image-id="1*QI6v3dhnSLqPITrplNwDhQ.png" data-width="604" data-height="401" src="https://cdn-images-1.medium.com/max/720/1*QI6v3dhnSLqPITrplNwDhQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="b120" class="graf graf--h4 graf-after--figure">Polar Area Chart or Variable Radius Pie&nbsp;Chart</h4><figure tabindex="0" contenteditable="false" name="298d" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 440px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.9%;"></div><img class="graf-image" data-image-id="1*n2V8_h67NC3NkEfAwox8-g.png" data-width="803" data-height="505" src="https://cdn-images-1.medium.com/max/720/1*n2V8_h67NC3NkEfAwox8-g.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="b84a" class="graf graf--h3 graf-after--figure">Step 5&#8202;—&#8202;Create basic Scatter chart with HighCharts</h3><p name="fe22" class="graf graf--p graf-after--h3">Creating scatter chart in HighCharts is as easy as creating any other chart. Just pick the correct <code class="markup--code markup--p-code">div</code> from the DOM and add HighCharts options to it. HighChart creation options will look like following</p><figure tabindex="0" contenteditable="false" name="8204" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/3ca09f1716c27dc935ef62c18366a2fb.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">data has been removed to keep Gist small. Full data is available in attached Github repo</figcaption></figure><p name="88ff" class="graf graf--p graf-after--figure">You’ll notice the major difference are in chart type</p><pre name="89b1" class="graf graf--pre graf-after--p">chart: {<br>  type: 'scatter',<br>  zoomType: 'xy'<br>},</pre><p name="c177" class="graf graf--p graf-after--pre">and <code class="markup--code markup--p-code">plotOptions</code> now has</p><p name="15a7" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">scatter → marker → radius </strong>options</p><p name="c254" class="graf graf--p graf-after--p">Other than that, all options remain general. The scatter plot will look like following</p><figure tabindex="0" contenteditable="false" name="56fd" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 517px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 73.9%;"></div><img class="graf-image" data-image-id="1*mFIizeUTw354HSirrUXvLw.png" data-width="863" data-height="638" src="https://cdn-images-1.medium.com/max/720/1*mFIizeUTw354HSirrUXvLw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Scatter chart with HighCharts</figcaption></figure><h3 name="f50f" class="graf graf--h3 graf-after--figure">Step 6&#8202;—&#8202;Create Dynamic charts with HighCharts</h3><p name="b7d9" class="graf graf--p graf-after--h3">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.</p><p name="4843" class="graf graf--p graf-after--p">For this, we can use <code class="markup--code markup--p-code">events</code> option of HighCharts option JSON. In <code class="markup--code markup--p-code">events</code>&nbsp;, we call <code class="markup--code markup--p-code">load</code> 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.</p><pre name="7ffc" class="graf graf--pre graf-after--p">events: {<br>  load: function () {<br>    // set up the updating of the chart each second<br>  }<br>}</pre><p name="1b3f" class="graf graf--p graf-after--pre">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</p><figure tabindex="0" contenteditable="false" name="5fb8" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/cd0765dd1ba85ef9a4c8863d64cecad8.js %}</div></div></figure><p name="ba8e" class="graf graf--p graf-after--figure">Note some important things in this chart</p><ul class="postList"><li name="7ffe" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">type</strong>&nbsp;: ‘spline’&#8202;—&#8202;creates spline chart</li><li name="1389" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">animation</strong>&nbsp;: true&#8202;—&#8202;allows animation</li><li name="dffd" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">events → load</strong>&#8202;—&#8202;function loads new point in the dataset every 1 second with <code class="markup--code markup--li-code">series.addPoint()</code></li><li name="9e2f" class="graf graf--li graf-after--li">Initial data is also created randomly</li></ul><p name="260e" class="graf graf--p graf-after--li">The resultant dynamic spline chart looks like following</p><figure tabindex="0" contenteditable="false" name="3146" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 539px; max-height: 400px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 74.2%;"></div><img class="graf-image" data-image-id="1*e2KbHAwOcjH3Gqz9gtw0IA.gif" data-width="539" data-height="400" src="https://cdn-images-1.medium.com/max/720/1*e2KbHAwOcjH3Gqz9gtw0IA.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="3072" class="graf graf--h3 graf-after--figure">Step 6&#8202;—&#8202;Test your app in Android and as&nbsp;PWA</h3><p name="ac70" class="graf graf--p graf-after--h3">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.</p><p name="6245" class="graf graf--p graf-after--p">Run the following command to create Android platform</p><pre name="9f9d" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><p name="f883" class="graf graf--p graf-after--pre">Once platform is added, run the app on device (Make sure you have a device attached to the system).</p><pre name="8b73" class="graf graf--pre graf-after--p">$ ionic cordova run android</pre><p name="7820" class="graf graf--p graf-after--pre">Once your app is up and running on the device, you can start testing all the functions.</p><h3 name="a33d" class="graf graf--h3 graf-after--p">Other cool charts possible in HighCharts</h3><p name="02e6" class="graf graf--p graf-after--h3">HighCharts has many other features and types of charts which you can create as easily as you created the above charts</p><h4 name="23ab" class="graf graf--h4 graf-after--p">Bubble Charts</h4><p name="69cb" class="graf graf--p graf-after--h4">Along with simple bubble charts, you can also create packed bubble charts like this one</p><figure tabindex="0" contenteditable="false" name="1e5c" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 598px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 85.39999999999999%;"></div><img class="graf-image" data-image-id="1*e7equ-dFGBZYzwujjPT9bA.gif" data-width="734" data-height="627" src="https://cdn-images-1.medium.com/max/720/1*e7equ-dFGBZYzwujjPT9bA.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="ffa9" class="graf graf--h4 graf-after--figure">Heat and Tree&nbsp;Maps</h4><figure tabindex="0" contenteditable="false" name="0500" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 232px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 33.2%;"></div><img class="graf-image" data-image-id="1*ciQFNzEcsEHOzm4u7yghww.png" data-width="956" data-height="317" src="https://cdn-images-1.medium.com/max/720/1*ciQFNzEcsEHOzm4u7yghww.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="1a3c" class="graf graf--h4 graf-after--figure">3D charts</h4><figure tabindex="0" contenteditable="false" name="4ef5" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 356px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50.8%;"></div><img class="graf-image" data-image-id="1*2SSaaCzva4l_TIE9B5Ox-A.png" data-width="815" data-height="414" src="https://cdn-images-1.medium.com/max/720/1*2SSaaCzva4l_TIE9B5Ox-A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">3D bar&nbsp;charts</figcaption></figure><figure tabindex="0" contenteditable="false" name="af28" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 358px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.1%;"></div><img class="graf-image" data-image-id="1*atuAL2_MDJ5CJOCLgtWgtQ.png" data-width="818" data-height="418" src="https://cdn-images-1.medium.com/max/720/1*atuAL2_MDJ5CJOCLgtWgtQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">3D funnel chart&#8202;—&#8202;Marketing guy anyone&nbsp;?</figcaption></figure><h4 name="1015" class="graf graf--h4 graf-after--figure">Gauges</h4><p name="7dd1" class="graf graf--p graf-after--h4">You can also create different styled gauges in HighCharts as well</p><figure tabindex="0" contenteditable="false" name="04f3" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 426px; max-height: 324px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 76.1%;"></div><img class="graf-image" data-image-id="1*xh4_Mggar0LalQGKHCUiMw.png" data-width="426" data-height="324" src="https://cdn-images-1.medium.com/max/720/1*xh4_Mggar0LalQGKHCUiMw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><figure tabindex="0" contenteditable="false" name="027f" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 618px; max-height: 217px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.099999999999994%;"></div><img class="graf-image" data-image-id="1*2xY70Zq20bAn5V9lJCgDrQ.gif" data-width="618" data-height="217" src="https://cdn-images-1.medium.com/max/720/1*2xY70Zq20bAn5V9lJCgDrQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Solid gauge with animation</figcaption></figure><figure tabindex="0" contenteditable="false" name="e06c" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 422px; max-height: 459px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.80000000000001%;"></div><img class="graf-image" data-image-id="1*i-S_PaWaKIu_Euyra7DB7Q.png" data-width="422" data-height="459" src="https://cdn-images-1.medium.com/max/720/1*i-S_PaWaKIu_Euyra7DB7Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Solid guage</figcaption></figure><h3 name="dd96" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="3058" class="graf graf--p graf-after--h3">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.</p><p name="77f7" class="graf graf--p graf-after--p">In next post of this series, we’ll learn how to create charts in Ionic 4 using Angular Google charts and other libraries.</p><blockquote name="3055" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-highcharts"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-highcharts</strong></a></blockquote><p name="e38f" class="graf graf--p graf-after--blockquote">Also check out other posts of this series,</p><blockquote name="a5a2" class="graf graf--blockquote graf-after--p">(Part 1&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 1&#8202;—&#8202;Using Chart.js</a>)<br>(Part 2&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 2&#8202;—&#8202;Using D3.js</a>)<br>(Part 4&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 4&#8202;—&#8202;Using Google Charts</a>)</blockquote><p name="3ace" class="graf graf--p graf-after--blockquote"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p><p name="2ada" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Buy “</em></strong><a href="https://store.enappd.com/product/ionic-4-chart-app-starter-ion-chart/"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic 4 Chart App Starter&#8202;—&#8202;Ion Chart</strong></a><strong class="markup--strong markup--p-strong">”<em class="markup--em markup--p-em"> today!!</em></strong></p><p name="fba2" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;— —</em></p><h3 name="a6f7" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of HighCharts for charting in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/720/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f1c1" class="graf graf--p graf--empty graf-after--figure graf--trailing is-selected" ><br></p></div></div></section></div></article></main>