Line Chart
The below guide shows you how to use the Bar Charts and Line Graphs component in your app.
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 and Pie Chart.
Before You Begin
Know the basics of Databases and Relationships 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
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
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.
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
Help
If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!
Last updated
Was this helpful?