Adding Charts in Ionic 4 apps and PWA : Part 1 - Using Chart.js
Tags: ionic, angular, charts, pwa
Published: 2020-03-25 02:34:31

<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="174d" 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="b139" class="graf graf--p graf-after--figure">This is post 1 of a 4 part series regarding <strong class="markup--strong markup--p-strong">how to create charts in Ionic 4 apps.</strong></p><blockquote name="c2cb" class="graf graf--blockquote graf-after--p">(Part 2&#8202;—&#8202;<a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&#8202;—&#8202;Using D3.js</a>)<br>(Part 3&#8202;—&#8202;<a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&#8202;—&#8202;Using HighCharts</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 is-selected">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><p name="620d" class="graf graf--p graf-after--p">In this Part 1, you’ll learn how to create various types of Charts using Chart.js</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-chartjs"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-chartjs</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&nbsp;Chart.js</h3><p name="bb7f" class="graf graf--p graf-after--h3"><a href="http://www.chartjs.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Chart.js</a> is a JavaScript library made for HTML5 that allows you to draw different types of charts. Chart.js uses <code class="markup--code markup--p-code">canvas</code>to draw charts, so you have to include a polyfill to support older browsers. It has several amazing features:</p><ol class="postList"><li name="ab9d" class="graf graf--li graf-after--p">Chart.js supports a good number of popular chart types, as shown in the image below</li></ol><figure tabindex="0" contenteditable="false" name="2a64" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 469px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.9%;"></div><img class="graf-image" data-image-id="1*5T5mwq4YAafTNzEWJMBpYg.png" data-width="762" data-height="510" src="https://cdn-images-1.medium.com/max/720/1*5T5mwq4YAafTNzEWJMBpYg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Chart types available in&nbsp;Chart.js</figcaption></figure><p name="f750" class="graf graf--p graf-after--figure">2. Charts created by Chart.js are responsive, so they will adapt based on the space available. This makes if extremely friendly for Ionic 4 apps which can also be served as PWA.</p><p name="86b8" class="graf graf--p graf-after--p">3. Chart.js is the parent library for many other Charting libraries. It doesn’t have dependencies and is very small in size when minified and gzipped (around 10 Kb).</p><p name="d8be" class="graf graf--p graf-after--p">4. You also have the ability to include only the chart modules you want from Chart.js e.g. include only Bar chart module if you need only bar charts.</p><p name="013f" class="graf graf--p graf-after--p">5. Chart.js has <a href="https://www.chartjs.org/docs/latest/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">great documentation</a> and good community support, so you can relax even if you are just starting on Chart.js. It’s not difficult at all, and any issue you face is probably already solved by someone.</p><p name="86bc" class="graf graf--p graf-after--p">There are some “<strong class="markup--strong markup--p-strong">cons</strong>” of Chart.js as well</p><ul class="postList"><li name="57d7" class="graf graf--li graf-after--p">Limited to only 6 graph types, and lacks the flexibility offered by other options. For example, controlling the display of tooltips is fairly limited.</li><li name="f19c" class="graf graf--li graf-after--li">It is Canvas based, so faces the same issues as non-vector formats.</li></ul><h4 name="f2ed" class="graf graf--h4 graf-after--li">Other Popular Javascript Charting libraries</h4><p name="2eeb" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">D3.js&#8202;—&#8202;</strong>D3.js (or just <strong class="markup--strong markup--p-strong">D3</strong> for <strong class="markup--strong markup--p-strong">Data-Driven Documents</strong>) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the Scalable Vector Graphics (SVG), HTML5, and CSS standards. It is mainly used for real-time data visualizations or admin dashboards.</p><figure tabindex="0" contenteditable="false" name="87b1" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 620px; max-height: 505px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 81.5%;"></div><img class="graf-image" data-image-id="1*Cns0pxD5LxfFRH9pm28p0A.gif" data-width="620" data-height="505" src="https://cdn-images-1.medium.com/max/720/1*Cns0pxD5LxfFRH9pm28p0A.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">D3.js in&nbsp;action</figcaption></figure><p name="ee7b" class="graf graf--p graf-after--figure">Check out more D3.js <a href="https://github.com/d3/d3/wiki/Gallery"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">examples</a> here</p><p name="e733" class="graf graf--p graf-after--p">There are many other popular charting libraries like HighCharts, FusionCharts, Angular Google Charts and more. All of these are custom libraries to create charts in a simple manner.</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 Chart.js to the app</li><li name="97a4" class="graf graf--li graf-after--li">Create your first chart</li><li name="ae28" class="graf graf--li graf-after--li">Create chart from external API call / JSON</li><li name="bae8" 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-chartjs"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-chartjs</strong></a></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"    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-chartjs 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 Inspect -&gt; Device Mode to see the code in a mobile layout. Next we’ll add the chart library to our app.</p><h3 name="e177" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Add Chart.js to the&nbsp;app</h3><p name="b479" class="graf graf--p graf-after--h3">To create charts you need to add Chart.js library to the app. Add the library from npm package</p><pre name="6b0d" class="graf graf--pre graf-after--p">npm install charts.js --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 the library in your page using</p><pre name="94b1" class="graf graf--pre graf-after--p">import { Chart } from 'chart.js';</pre><p name="5f78" class="graf graf--p graf-after--pre">That’s it&nbsp;! You are ready to use Chart.js in your app and PWA pages.</p><h3 name="2135" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Create your first&nbsp;chart</h3><p name="92ce" class="graf graf--p graf-after--h3">Chart.js uses <code class="markup--code markup--p-code">canvas</code> to create charts in HTML5. You will have to add a <code class="markup--code markup--p-code">canvas</code> element in page HTML, and access this <code class="markup--code markup--p-code">canvas</code> in <code class="markup--code markup--p-code">page.ts</code> file to create chart on.</p><p name="1b6c" class="graf graf--p graf-after--p">Let’s add a simple <code class="markup--code markup--p-code">canvas</code> element in HTML</p><figure tabindex="0" contenteditable="false" name="4f11" 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/42161298a4746a1229c3dec0201773c9.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Add a canvas element to create Chart on</figcaption></figure><h4 name="f732" class="graf graf--h4 graf-after--figure">Vertical Bar&nbsp;Chart</h4><p name="b8a3" class="graf graf--p graf-after--h4">Access <code class="markup--code markup--p-code">#barChart</code> in <code class="markup--code markup--p-code">home.page.ts</code> and create a simple vertical bar chart on the <code class="markup--code markup--p-code">canvas</code>&nbsp;. The complete code of <code class="markup--code markup--p-code">home.page.ts</code> will look like following</p><figure tabindex="0" contenteditable="false" name="53cd" 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/f775d8da80c5d11d11828608c464adbb.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">home.page.ts for a simple vertical bar chart</figcaption></figure><p name="fe0f" class="graf graf--p graf-after--figure">Note, <code class="markup--code markup--p-code u-paddingRight0 u-marginRight0"><a href="http://twitter.com/ViewChild"  class="markup--anchor markup--p-anchor" title="Twitter profile for @ViewChild" rel="noopener"    target="_blank">@ViewChild</a>(‘barChart’) barChart;</code> accesses the <code class="markup--code markup--p-code">canvas</code> element in a variable <code class="markup--code markup--p-code">barChart</code>&nbsp;. This is the element used later to draw on.</p><p name="0f07" class="graf graf--p graf-after--p">The Bar chart will look like this</p><figure tabindex="0" contenteditable="false" name="f2d6" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 388px; max-height: 682px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.8%;"></div><img class="graf-image" data-image-id="1*S-9Sg5LwepZnCqee4p3MQA.png" data-width="388" data-height="682" src="https://cdn-images-1.medium.com/max/720/1*S-9Sg5LwepZnCqee4p3MQA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="d2b0" class="graf graf--p graf-after--figure">Let’s go over some of the parameters and their usage</p><ul class="postList"><li name="b72c" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">type</strong>&#8202;—&#8202;Type defines the variety of chart e.g. line, bar, pie etc</li><li name="00f0" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">data</strong>&#8202;—&#8202;Data is the dataset which you are plotting on the charts.</li><li name="1e96" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">data → labels&#8202;—&#8202;</strong>To label a particular data set</li><li name="39c3" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">data → datasets&#8202;—&#8202;</strong>data object for one dataset. Multiple such objects can be plotted together</li><li name="ea6d" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">scales&#8202;—&#8202;</strong><code class="markup--code markup--li-code">scales</code><strong class="markup--strong markup--li-strong"> </strong>contains options for X and Y axes, grid options, sizing etc.</li></ul><p name="9546" class="graf graf--p graf-after--li">Cool, right&nbsp;? Now, let’s generate more awesome charts using various options.</p><h4 name="fd8d" class="graf graf--h4 graf-after--p">Horizontal Bar&nbsp;Chart</h4><p name="ee67" class="graf graf--p graf-after--h4">To change the vertical chart to horizontal, you simply need to change <code class="markup--code markup--p-code">type</code> from <code class="markup--code markup--p-code">line</code>to <code class="markup--code markup--p-code">horizontalLine</code>&nbsp;. The result will be this</p><figure tabindex="0" contenteditable="false" name="bd33" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 387px; max-height: 681px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176%;"></div><img class="graf-image" data-image-id="1*LjAxk9o2L46vtu9q8QEGDg.png" data-width="387" data-height="681" src="https://cdn-images-1.medium.com/max/720/1*LjAxk9o2L46vtu9q8QEGDg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="86a2" class="graf graf--h4 graf-after--figure">Custom Height For&nbsp;Chart</h4><p name="71f2" class="graf graf--p graf-after--h4">As you can see in the previous screen, the horizontal chart appears very squished. We can adjust the bar thickness and overall height of the chart to change this.</p><p name="8152" class="graf graf--p graf-after--p">By default, all the bars take equal spaces in the chart. We can set the chart height to a custom height using</p><pre name="7351" class="graf graf--pre graf-after--p">createHrzBarChart2() {<br>let ctx = this.hrzBarChart2.nativeElement;<br>ctx.height = 400;<br>this.hrzBars2 = new Chart(ctx, {<br>....</pre><p name="0c96" class="graf graf--p graf-after--pre">This will set the height to 400, and the bars’ width will adjust automatically. You can set</p><p name="0a0e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">options → scales → xAxes → barPercentage = 0.9</strong></p><p name="2653" class="graf graf--p graf-after--p">This will set the width of bars to 90% of the maximum possible. This creates a neat looking gap between the bars.</p><figure tabindex="0" contenteditable="false" name="211e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 395px; max-height: 687px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 173.9%;"></div><img class="graf-image" data-image-id="1*Xw4TAitaRqxIeJ4IpuS8ig.png" data-width="395" data-height="687" src="https://cdn-images-1.medium.com/max/720/1*Xw4TAitaRqxIeJ4IpuS8ig.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Horizontal bars with custom chart&nbsp;height</figcaption></figure><h4 name="1225" class="graf graf--h4 graf-after--figure">Custom Colors</h4><p name="928a" class="graf graf--p graf-after--h4">Another cool thing is&#8202;—&#8202;you can set custom colors to each bar. You will have to set</p><p name="f5e9" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">data → datasets (element) → backgroundColor = color Array</strong></p><p name="dff9" class="graf graf--p graf-after--p">The number of elements of this array should be same as number of data points, otherwise the missing elements will get a <code class="markup--code markup--p-code">gray</code> color.</p><p name="914a" class="graf graf--p graf-after--p">You can generate random colors using a function like following</p><figure tabindex="0" contenteditable="false" name="102b" 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/0b1ad2f24eb4da627f2158f419988ae1.js %}</div></div></figure><p name="5b61" class="graf graf--p graf-after--figure">Resulting chart will look like this with random colors</p><figure tabindex="0" contenteditable="false" name="28ef" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 377px; max-height: 669px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.5%;"></div><img class="graf-image" data-image-id="1*VmQV-HE6WQVRmCJCMsEprg.png" data-width="377" data-height="669" src="https://cdn-images-1.medium.com/max/720/1*VmQV-HE6WQVRmCJCMsEprg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Multiple color&nbsp;chart</figcaption></figure><h4 name="39d1" class="graf graf--h4 graf-after--figure">Grouped Bar&nbsp;Charts</h4><p name="01e4" class="graf graf--p graf-after--h4">For practical purposes, we often compares two datasets. This can be achieved by simply adding one more dataset in the <code class="markup--code markup--p-code">data</code> element</p><figure tabindex="0" contenteditable="false" name="bc92" 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/5a7b25bbae0cb360852e11118b5658f4.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Multiple datasets for bar charts</figcaption></figure><figure tabindex="0" contenteditable="false" name="cf05" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 384px; max-height: 677px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.29999999999998%;"></div><img class="graf-image" data-image-id="1*o7XZpaUSElEnDnQxEIf1XA.png" data-width="384" data-height="677" src="https://cdn-images-1.medium.com/max/720/1*o7XZpaUSElEnDnQxEIf1XA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Grouped bar chart for multiple&nbsp;dataset</figcaption></figure><h4 name="a375" class="graf graf--h4 graf-after--figure">Stacked Bar&nbsp;Charts</h4><p name="ff4d" class="graf graf--p graf-after--h4">If you want to see a division of data into different colors with a stacked bar chart, you can simple add</p><p name="dde0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">options → scales → xAxes → stacked: true</strong></p><p name="78ab" class="graf graf--p graf-after--p">This will create a stacked bar chart like following</p><figure tabindex="0" contenteditable="false" name="ef1e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 387px; max-height: 681px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176%;"></div><img class="graf-image" data-image-id="1*gMieQt92A5EhSr4Q0xGT1g.png" data-width="387" data-height="681" src="https://cdn-images-1.medium.com/max/720/1*gMieQt92A5EhSr4Q0xGT1g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Stacked Bar&nbsp;Chart</figcaption></figure><h4 name="2054" class="graf graf--h4 graf-after--figure">Simple Line&nbsp;Chart</h4><p name="3442" class="graf graf--p graf-after--h4">To create a simple line chart from the same dataset as the bar chart, just replace <code class="markup--code markup--p-code">type:'bar’</code> with <code class="markup--code markup--p-code">type:'line'</code>&nbsp;. You will get the following result (Keep the <code class="markup--code markup--p-code">backgroundColor: rgba(0,0,0,0)</code>)</p><figure tabindex="0" contenteditable="false" name="3205" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 394px; max-height: 449px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 113.99999999999999%;"></div><img class="graf-image" data-image-id="1*oRI01JDDX9TAfVzHT_h11Q.png" data-width="394" data-height="449" src="https://cdn-images-1.medium.com/max/720/1*oRI01JDDX9TAfVzHT_h11Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple line&nbsp;chart</figcaption></figure><h4 name="f0aa" class="graf graf--h4 graf-after--figure">Simple Area&nbsp;Chart</h4><p name="a8b1" class="graf graf--p graf-after--h4">If you provide a background color in a line chart, you’ll get an Area Chart</p><figure tabindex="0" contenteditable="false" name="65e1" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 395px; max-height: 435px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 110.1%;"></div><img class="graf-image" data-image-id="1*urJ2RshiEsYUsUnEUUX6nw.png" data-width="395" data-height="435" src="https://cdn-images-1.medium.com/max/720/1*urJ2RshiEsYUsUnEUUX6nw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple Area&nbsp;chart</figcaption></figure><h4 name="ea23" class="graf graf--h4 graf-after--figure">Grouped Line&nbsp;Chart</h4><p name="aad2" class="graf graf--p graf-after--h4">Adding multiple dataset, similar to the bar chart example, you can create grouped line charts as can be seen below.</p><figure tabindex="0" contenteditable="false" name="6343" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 388px; max-height: 430px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 110.80000000000001%;"></div><img class="graf-image" data-image-id="1*BLWH5zl5zK18Enf7taQS8g.png" data-width="388" data-height="430" src="https://cdn-images-1.medium.com/max/720/1*BLWH5zl5zK18Enf7taQS8g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Grouped line&nbsp;chart</figcaption></figure><h4 name="f09c" class="graf graf--h4 graf-after--figure">Stacked Area&nbsp;Chart</h4><p name="23e5" class="graf graf--p graf-after--h4">In grouped line chart, if you add backgroud color to each dataset, you’ll get a stacked area chart.</p><figure tabindex="0" contenteditable="false" name="2baf" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 388px; max-height: 680px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.29999999999998%;"></div><img class="graf-image" data-image-id="1*0nVfbt73NpaUQPy48Pztxw.png" data-width="388" data-height="680" src="https://cdn-images-1.medium.com/max/720/1*0nVfbt73NpaUQPy48Pztxw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Stacked area&nbsp;chart</figcaption></figure><h4 name="5c72" class="graf graf--h4 graf-after--figure">Simple Pie&nbsp;Chart</h4><p name="84e2" class="graf graf--p graf-after--h4">To create a simple Pie chart replace<code class="markup--code markup--p-code">type:'line’</code> with <code class="markup--code markup--p-code">type:'pie'</code>&nbsp;. If you have the background color set on the random color dataset as shown above, then it will look something like below.</p><figure tabindex="0" contenteditable="false" name="7626" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 388px; max-height: 681px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.5%;"></div><img class="graf-image" data-image-id="1*lvXkj8-izFErcmkCItEAEA.png" data-width="388" data-height="681" src="https://cdn-images-1.medium.com/max/720/1*lvXkj8-izFErcmkCItEAEA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="e493" class="graf graf--h4 graf-after--figure">Simple Doughnut&nbsp;Chart</h4><p name="8151" class="graf graf--p graf-after--h4">To create a simple Pie chart replace<code class="markup--code markup--p-code">type:'pie’</code> with <code class="markup--code markup--p-code">type:'doughnut'</code>&nbsp;. Make sure you have the background colors set on the random color dataset as shown above.</p><figure tabindex="0" contenteditable="false" name="b864" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 392px; max-height: 382px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 97.39999999999999%;"></div><img class="graf-image" data-image-id="1*gXv9y7xJh0eJsIuiYdTIrA.png" data-width="392" data-height="382" src="https://cdn-images-1.medium.com/max/720/1*gXv9y7xJh0eJsIuiYdTIrA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="c3bd" class="graf graf--h3 graf-after--figure">Step 4&#8202;—&#8202;Create chart from external API call /&nbsp;JSON</h3><p name="4db7" class="graf graf--p graf-after--h3">To simulate a real app environment, we’ll fetch data from an API, and then create charts using the same. This will show the effects of incoming data delay etc.</p><p name="9e4f" class="graf graf--p graf-after--p">To create a dummy API, we can use <code class="markup--code markup--p-code">mocky.io</code>&nbsp;. Mocky helps to create dummy API with the response you want to send. It then gives you a URL which you can fetch when calling the API. You can use the following API URL</p><pre name="90e8" class="graf graf--pre graf-after--p"><a href="http://www.mocky.io/v2/5d28754a2c000066003eda63?mocky-delay=3000ms"  class="markup--anchor markup--pre-anchor" rel="noopener" target="_blank">http://www.mocky.io/v2/5d28754a2c000066003eda63?mocky-delay=3000ms</a></pre><p name="52e4" class="graf graf--p graf-after--pre">The response will be</p><figure tabindex="0" contenteditable="false" name="24f3" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 515px; max-height: 138px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 26.8%;"></div><img class="graf-image" data-image-id="1*PJK3h442UvjkqqQVLq48RQ.png" data-width="515" data-height="138" src="https://cdn-images-1.medium.com/max/720/1*PJK3h442UvjkqqQVLq48RQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="8902" class="graf graf--p graf-after--figure">Now, to call API, we need to use <code class="markup--code markup--p-code">HttpClient</code> in Ionic. Import <code class="markup--code markup--p-code">HttpClientModule</code> in <code class="markup--code markup--p-code">app.module.ts</code></p><pre name="43df" class="graf graf--pre graf-after--p">import { HttpClientModule } from '@angular/common/http';</pre><p name="42cb" class="graf graf--p graf-after--pre">and add the same in imports as well</p><pre name="69fc" class="graf graf--pre graf-after--p">imports: [<br>...,<br>HttpClientModule,<br>...<br>],<br>...</pre><p name="1bff" class="graf graf--p graf-after--pre">Import <code class="markup--code markup--p-code">HttpClient</code> in <code class="markup--code markup--p-code">home.page.ts</code> and declare it in constructor as well. Now fetch data using a simple function</p><figure tabindex="0" contenteditable="false" name="c259" 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/1c92ad99c44e5dba2f1b2bedca3dcc52.js %}</div></div></figure><p name="11c5" class="graf graf--p graf-after--figure">I have also added a 3000ms delay to simulate server delays. The data received is supplied to the chart creation function. The result look something like this</p><figure tabindex="0" contenteditable="false" name="3705" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 599px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 171.1%;"></div><img class="graf-image" data-image-id="1*LW8XYlQDfQdG1IAflDpxmQ.gif" data-width="350" data-height="599" src="https://cdn-images-1.medium.com/max/720/1*LW8XYlQDfQdG1IAflDpxmQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Fetch chart data via&nbsp;API</figcaption></figure><h3 name="3072" class="graf graf--h3 graf-after--figure">Step 5&#8202;—&#8202;Test your app in Android and as&nbsp;PWA</h3><p name="ac70" class="graf graf--p graf-after--h3">Now that everything is ready, we need to build this app for Android. 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><p name="8514" class="graf graf--p graf-after--p">In browser (As PWA), the charts will appear a little bigger 😄</p><figure tabindex="0" contenteditable="false" name="1b47" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.2%;"></div><img class="graf-image" data-image-id="1*RWOBKk-L-92hYaqNWYvnOA.png" data-width="1387" data-height="766" src="https://cdn-images-1.medium.com/max/720/1*RWOBKk-L-92hYaqNWYvnOA.png"><div class="crosshair u-ignoreBlock"></div></div></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 various charts using Chart.js in Ionic 4 apps and PWA. Since Chart.js is amazingly light and has great documentation, it is developers’ first choice when it comes to creating charts.</p><p name="77f7" class="graf graf--p graf-after--p">In next posts of this series, we’ll learn how to create charts in Ionic 4 using D3, Highcharts 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-chartjs"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-chartjs</strong></a></blockquote><p name="11a8" class="graf graf--p graf-after--blockquote">Check out other posts in this series</p><blockquote name="4f63" class="graf graf--blockquote graf-after--p">(Part 2&#8202;—&#8202;<a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&#8202;—&#8202;Using D3.js</a>)<br>(Part 3&#8202;—&#8202;<a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&#8202;—&#8202;Using HighCharts</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><h3 name="a6f7" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of charts using chart.js 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"    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"    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"    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"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p"><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><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app template for your next awesome&nbsp;app</figcaption></figure><p name="f091" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>