---
updatedAt: 2025-07-15T08:37:25.000Z
agentTools:
  projectIndex: https://docs.appery.io/llms.txt
---

# Ionic Line Chart Sample App

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

<HTMLBlock>{`
<div style="border-width:1px;border-style:solid;width:377px;border-color:grey;">
      <iframe src="https://linechart.app.appery.io/#/screen1#/homepage" seamless="seamless" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:667px;width:375px;top:0px;left:0px;right:0px;bottom:0px"></iframe>
</div>
`}</HTMLBlock>

# Before You Start

* Tutorial level: beginner; your first mobile app.
* Prerequisites: an [Appery.io account](https://appery.io/account/signup).

# Creating App

You can select how you would like to get the app working under your [Appery.io account](https://docs.appery.io/docs/account):

1. [Download the app backup](#downloads-and-resources) with further installing it (the backup can be securely saved for further use);
2. [Create the app from our template](#creating-app-from-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](#creating-new-app) using our step-by-step illustrated instructions (more time-consuming but highly educating option that will help in mastering work with [Appery.io](https://appery.io)).

## Downloads and Resources

You can try the app yourself by creating from the [backup](https://appery.io/wp-content/uploads/tutorial-ionic5-chart-app.zip):

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

## 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!

<HTMLBlock>{`
</head><body><a href="https://appery.io/app/projects/action/create-from-template?name=ChartApp&guid=91d8f338-1532-4a7c-a4af-8b6727670209" class="btn btn-green" target="_blank">Create in Appery.io</a></body></html>
`}</HTMLBlock>

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

## Creating New App

1. From the **[Apps](https://appery.io/app/projects)** tab, click **[Create new app](https://docs.appery.io/docs/1-creating-an-app-ui-palette#creating-new-app)**.
2. Select **[Blank](https://docs.appery.io/docs/ionic-5-app-templates#ionic-5-blank)** as a template, enter the app name, 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](https://docs.appery.io/docs/apperyio-visual-builder#project-view), unfold **Pages** and open the **[Screen1](https://docs.appery.io/docs/2-creating-an-app-ui-pages-and-tabs#pages-screens)** page.
2. From **[PALETTE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#ui-components-palette-overview)** on the left, drag the **[Chart](https://docs.appery.io/docs/ionic-5-ui-components-properties#onic-5-ui-components-properties#chart)** component and drop it to the screen.

### Defining Application Logic

1. Switch to the **[CODE](https://docs.appery.io/docs/apperyio-visual-builder#code-panel)** 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:

<Image alt="Adding **data** variable" align="center" border={true} src="https://files.readme.io/cbf8b50-small-2023-05-12_17-38-05.png">
  Adding **data** variable
</Image>

2. Go back to the **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel and select the **[Chart Data](https://docs.appery.io/docs/ionic-5-ui-components-properties#tchart-data)** component inside your app (you can use the **[OUTLINE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#outline-view)** view menu or the **Breadcrumbs** for navigating between the app UI components).
3. Then, under the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel on the right, specify its property **Legend Label** property as ***My Chart*** and select ***data*** for the **Data** property:

<Image alt="Defining ChartData" align="center" border={true} src="https://files.readme.io/bb6b9ea-small-2023-05-12_17-38-05.png">
  Defining ChartData
</Image>

5. Now, click the **TEST** button in the **[App Builder](https://appery.io/appbuilder)** **[Toolbar](https://docs.appery.io/docs/apperyio-visual-builder#toolbar)** to check if your line chart looks good on the screen.

<Image align="center" className="border" width="30% " border={true} src="https://files.readme.io/17c8310-small-2023-05-12_18-41-31.png" />

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

6. On the **[CODE](https://docs.appery.io/docs/apperyio-visual-builder#code-panel)** 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:

<Image title="Screenshot_12.png" alt={709} align="center" border={true} src="https://files.readme.io/a5b2ee1-Screenshot_12.png">
  Variables
</Image>

7. Go back to the page **[DESIGN](https://docs.appery.io/docs/apperyio-visual-builder#design-panel)** panel, select the chart container and under the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel on the right, specify the property **Label** as ***labels***:

<Image alt="Defining Chart" align="center" border={true} src="https://files.readme.io/a849637-small-2023-05-12_18-42-50.png">
  Defining Chart
</Image>

Click **SAVE** and test again:

<Image align="center" className="border" border={true} src="https://files.readme.io/d65b269-small-2023-05-12_18-43-42.png" />

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

8. 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***:

<Image alt="Defining **Chart** **Title** advanced property" align="center" border={true} src="https://files.readme.io/d7fcae0-small-2023-05-12_18-44-50.png">
  Defining **Chart** **Title** advanced property
</Image>

# Testing App

Click **SAVE** and then **TEST**:

<Image alt="Resulting app" align="center" width="30% " border={true} src="https://files.readme.io/26615ed-small-2023-05-12_18-45-40.png">
  Resulting app
</Image>

# Testing on Device

When your app version is ready, you might also like to [test](https://docs.appery.io/docs/9-testing-your-app) 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](https://apps.apple.com/app/id737478069) and [Android](https://play.google.com/store/apps/details?id=io.appery.tester\&hl=en).\
> You can check out [this](https://docs.appery.io/docs/apperyio-tester-app) page to learn more about using the **Appery.io Tester** app.