Ionic 5 Line Chart Sample App

This step-by-step tutorial explains how to create a simple Ionic 5 mobile application with a line chart in Appery.io.

Introduction

In this detailed tutorial, you will learn how to build a mobile app with a chart inside of it.

Before You Start

  • Tutorial level: beginner; your first mobile app.
  • Prerequisites: an Appery.io account.

Creating App

You can select how you would like to get the app working under your Appery.io account:

  1. Download the app backup with further installing it (the backup can be securely saved for further use);
  2. Create the app from our template with one click (the easiest and quickest option: you will get the working app in a matter of moments)
  3. Create the app by yourself using our step-by-step illustrated instructions (more time-consuming but highly educating option that will help in mastering work with Appery.io).

Downloads and Resources

You can try the app yourself by creating from the backup:

  1. Download the app backup file.
  2. Click Create new app.
  3. Click From backup and select the project backup file on your drive.
  4. Type in the app name.
  5. Click Create:
923923

Creating App from Template

👍

NEW: One-Click Template Installation!

You can now enjoy the one-click-away option of installing the template app: simply click the button below and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download the template backup with further installing it!

But if you are interested in the app details, please check out the steps below.

Creating New App

  1. From the Apps tab, click Create new app.
  2. Select the Ionic 5 application for its type and Blank as a template, enter Ionic 5 ChartApp for the app name, and click Create:
925925

Building UI

The new application appears with a default first page. To build the UI for your app:

  1. Under the Project view, unfold Pages and open the Screen1 page.
  2. From PALETTE on the left, drag & drop the Chart component to the screen. The screen should look like this:
15901590

Adding Chart to the Screen1 page

Defining Application Logic

  1. Switch to the CODE panel, add a variable: data with type Any and specify its value as array of numbers (for example, [65,78,45,214,456]). These numbers will be used to draw your line chart:
706706

Adding data variable

  1. Go back to the DESIGN panel panel and select the Chart Data component inside your app (you can use the OUTLINE view menu or the Breadcrumbs for navigating between the app UI components):
13481348
  1. Then, under the PROPERTIES panel on the right, specify its property Legend Label property as My Chart and select data for the Data property:
11381138

Defining ChartData

  1. Now, click the TEST button in the App Builder Toolbar to check if your line chart looks good on the screen.
518518

As we can see, it looks OK but we can make it more informative so let's add labels to it.

  1. On the CODE panel, add one more variable: labels with type Any and specify the value as array of labels (for example, ["June", "July", "August", "September", "October"]).
    Now, the Variables section should look like this:
709709

Variables

  1. Go back to the page DESIGN panel, select the chart container and under the PROPERTIES panel on the right, specify the property Label as labels:
11391139

Defining Chart

Click SAVE and test again:

521521

Before we finish, let’s also add a title to our chart.

  1. Select the chart container again and for Show Advanced Properties select Title, then expand the Title property below, specify the property Text as My First Chart Title, and set the property Display to True:
11361136

Defining Chart Title advanced property

Testing App

Click SAVE and then TEST:

524524

Resulting app

Testing on Device

When your app version is ready, you might also like to test it on the device.

👍

Using Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app. The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.

466466

Did this page help you?