# Line Chart

***Skill Level:** Beginner*

The Line Chart component displays data from a database collection as connected points on a line. Each point represents a record, with the X axis showing categories (text) and the Y axis showing values (numbers). You can toggle visible data points and add click actions to each point.

The Line Chart is part of the **Charts** component kit, which also includes the [Bar Chart](https://claude.ai/component-basics/marketplace-components/bar-chart) and [Pie Chart](https://claude.ai/component-basics/marketplace-components/pie-chart).

***

## Before You Begin

* Know the basics of [Databases and Relationships](https://help.adalo.com/database) in Adalo
* Have a collection with at least one **text property** (for point labels) and one **number property** (for point values)
* Your collection must have **at least 2 records** — a line chart needs 2 or more data points to draw a line
* Install the **Charts** component kit from the Marketplace (if not already installed)

***

### Setting Up a Line Chart

#### Add the Component

Click the **+** button in the left toolbar, scroll to **Marketplace**, and find **Charts**. If you haven't installed it yet, click **Install**. Then drag the **Line Chart** onto your screen.

#### Connect Your Data

In the property panel on the left, you'll see **"What is this a chart of?"** — click this and select the database collection that contains your chart data.

#### Set the X Axis Value

Under your collection, find **X Axis Value**. Click the Magic Text icon and select the **text property** you want to use as point labels along the horizontal axis (e.g., "Date", "Month", "Category").

#### Set the Y Axis Value

Find **Y Axis Value** and click the Magic Text icon. Select the **number property** you want to plot on the vertical axis (e.g., "Revenue", "Temperature", "Score").

{% hint style="info" %} You can use custom math formulas here. For example, if you want to show average cost per day, you can divide Total Cost by Number of Days — even if that calculation isn't stored in your database. {% endhint %}

#### Add a Point Action (Optional)

Under **Point Action**, you can add an action that triggers when a user taps a data point on the chart. This works like any other Adalo action — navigate to a detail screen, update a record, show a notification, etc.

{% hint style="warning" %} Point actions work by tapping the data point circles on the line. If **Toggle Data Points** is off, invisible tap targets are still present and the action will still fire — but users won't see what to tap. Always enable **Toggle Data Points** when using Point Actions. {% endhint %}

***

### Customizing the Styles

Click the **Styles** tab in the property panel to access all visual customization options.

**Chart Title** — A text field displayed at the top of the chart. Supports custom font family, size, weight, and color. Leave empty to hide.

**Chart Subtitle** — A smaller text field displayed below the title. Supports the same font options as the title. Leave empty to hide.

**Y Axis Label** — A label displayed along the vertical axis. Useful for indicating units (e.g., "Revenue ($)", "Degrees F"). Supports font customization.

**X Axis Label** — A label displayed along the horizontal axis. Supports font customization.

**Line Color** — The color of the line and data points. Defaults to your app's Primary branding color. Click to choose any color.

**Toggle Data Points** — When enabled, displays visible circles at each data point on the line. Makes it easier for users to see exact data positions and tap them to trigger Point Actions.

**Toggle Y Labels** — When enabled, displays the numeric Y value near each data point. When data points are visible, labels appear above the points. When data points are off, labels appear above the line.

{% hint style="info" %} If a data point is at the maximum Y value in your dataset, its label may appear at the very top of the chart. The chart automatically adjusts its vertical padding to keep labels visible — but if labels are still clipped, increase the component height. {% endhint %}

***

### Property Reference

| Property                 | Location | Type                | Description                                          |
| ------------------------ | -------- | ------------------- | ---------------------------------------------------- |
| What is this a chart of? | Setup    | Collection          | The database collection to chart                     |
| X Axis Value             | Setup    | Text (Magic Text)   | The label for each data point                        |
| Y Axis Value             | Setup    | Number (Magic Text) | The position of each data point                      |
| Point Action             | Setup    | Action              | Action triggered when a data point is tapped         |
| Chart Title              | Styles   | Text (Styleable)    | Title displayed above the chart                      |
| Chart Subtitle           | Styles   | Text (Styleable)    | Subtitle displayed below the title                   |
| Y Axis Label             | Styles   | Text (Styleable)    | Label for the vertical axis                          |
| X Axis Label             | Styles   | Text (Styleable)    | Label for the horizontal axis                        |
| Line Color               | Styles   | Color               | Color of the line and data points (default: Primary) |
| Toggle Data Points       | Styles   | Boolean             | Show/hide circles at each data point                 |
| Toggle Y Labels          | Styles   | Boolean             | Show/hide numeric values near data points            |

***

### Known Limitations and Gotchas

* **The line chart requires at least 2 records.** With only 1 record, nothing will render — there's no single-point line.
* **Toggle Data Points must be on when using Point Actions.** If data points are hidden, users can still accidentally trigger the action by tapping the invisible hit target, but they'll have no visual cue showing where to tap.
* **Y Axis Value must be a number property with varying values.** If the line is flat, check that the field is a number type and that the values in your collection actually differ.
* **Title and subtitle font sizes affect the chart layout.** Larger fonts push the chart area down. If your chart looks cramped, reduce the title font size or increase the component height.
* **Long X axis labels are automatically truncated and angled.** If labels are still overlapping, reduce the number of records or shorten the label text.
* **The chart resizes horizontally to fit its container.** Drag the component wider for a smoother line with more spacing between points.

***

### Troubleshooting

| Issue                        | Cause                                                          | Fix                                                                               |
| ---------------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| Chart shows nothing          | Collection has fewer than 2 records, or no collection selected | Verify "What is this a chart of?" is set and the collection has 2+ records        |
| Line is flat                 | Y Axis Value is a text field or all values are the same        | Make sure Y Axis Value is mapped to a **number** property with varying values     |
| Point action doesn't trigger | Action not configured, or tapping the line instead of a point  | Set a Point Action and enable Toggle Data Points for visible tap targets          |
| Y labels hidden at the top   | Data point at the max Y value                                  | The chart adjusts automatically — if still clipped, increase the component height |
| Title/subtitle overlap       | Font size too large for chart height                           | Reduce font size or increase the component height                                 |
| X axis labels overlap        | Too many data points or labels too long                        | Reduce the number of records or shorten label text                                |
| Data points not visible      | Toggle Data Points is off                                      | Enable **Toggle Data Points** in the Styles tab                                   |

***

### Bar Chart vs. Line Chart

Not sure which to use? Here's a quick guide.

| Use Case                                          | Best Choice       |
| ------------------------------------------------- | ----------------- |
| Comparing categories (e.g., sales by product)     | Bar Chart         |
| Showing trends over time (e.g., revenue by month) | Line Chart        |
| Highlighting individual values                    | Bar Chart         |
| Showing continuous change                         | Line Chart        |
| Small number of categories (3 to 8)               | Either works well |
| Large number of data points (10+)                 | Line Chart        |

***

## Learn More

* [**Bar Chart**](https://claude.ai/component-basics/marketplace-components/bar-chart)
* [**Pie Chart**](https://claude.ai/component-basics/marketplace-components/pie-chart)
* [**Databases and Relationships**](https://help.adalo.com/database)

***

## Help

If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/component-basics/marketplace-components/line-chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.