Documentation | Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Ionic 4 Line Chart Tutorial

This step-by-step tutorial explains how to create a simple Ionic 4 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 New App

  1. On the Apps tab, click Create new app.
  2. Select Ionic 4 as the application type, enter an app name, for example, ChartApp, and click Create.

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 Screen1.
  2. From the PALETTE on the left, drag & drop a Chart component to the screen. The screen should look like this:

Adding Chart to the Screen1 page

Defining Application Logic

  1. Switch to the CODE tab, 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:

Adding data variable

  1. Go back to the DESIGN tab and select the Chart Data component inside your app.
  2. Then, under the PROPERTIES menu on the right, specify its property Data as data.

Defining ChartData

Now, click the TEST button to check if your line chart looks good on the screen.

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 tab, 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:

Variables

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

Defining Chart

Click Save and test again:

  1. Now, you can go back to the editor and define the name of your line chart by selecting the Chart Data component and specifying the Legend Label property as My Chart.
    But before we finish, let’s also add a title to our chart.
  2. 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:

Defining Chart Title advanced property

  1. Click Save and then TEST:

Resulting app

📘

You can also check this Appery.io Community video that shows how to draw a line chart in an Ionic 4 app:

Updated 19 days ago

Ionic 4 Line Chart Tutorial


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

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.