Bar Chart
The below guide shows you how to use the Bar Charts and Line Graphs component in your app.
Skill Level: Beginner
The Bar Chart component displays data from a database collection as vertical bars. Each bar represents a record, with the X axis showing categories (text) and the Y axis showing values (numbers). Bars are clickable, so you can trigger actions when a user taps one.
The Bar Chart is part of the Charts component kit, which also includes the Line 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 bar labels) and one number property (for bar values)
Install the Charts Kit Component from the Marketplace (if not already installed)
Setting Up a Bar 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 Bar 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 bar labels (e.g., "Product Name", "Month", "Category").
Set the Y Axis Value
Find Y Axis Value and click the Magic Text icon. Select the number property you want to display as bar heights (e.g., "Sales", "Count", "Revenue").
{% hint style="info" %} You can use custom math formulas here. For example, if you want to show cost per day, you can divide Trip Cost by Number of Days โ even if that calculation isn't stored in your database. {% endhint %}
Add a Bar Action (Optional)
Under Bar Action, you can add an action that triggers when a user taps a bar. This works like any other Adalo action โ navigate to a detail screen, update a record, show a notification, etc. The action receives the tapped bar's record as context.
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 ($)", "Count"). Supports font customization.
X Axis Label โ A label displayed along the horizontal axis. Supports font customization.
Bar Color โ The fill color for all bars. Defaults to your app's Primary branding color. Click to choose any color.
Toggle Y Labels โ When enabled, displays the numeric Y value on top of each bar. Useful for showing exact values at a glance.
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 bar
Y Axis Value
Setup
Number (Magic Text)
The height of each bar
Bar Action
Setup
Action
Action triggered when a bar 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
Bar Color
Styles
Color
Fill color for all bars (default: Primary)
Toggle Y Labels
Styles
Boolean
Show/hide numeric values on bars
Known Limitations and Gotchas
Long X axis labels are automatically truncated. If your labels are getting cut off, abbreviate them in your database or use shorter text values.
Bar charts work best with 3 to 8 bars. More than 8 bars can make the chart difficult to read, especially on mobile screens.
Title and subtitle font sizes affect the chart layout. Larger fonts push the chart area down to make room. If your chart looks cramped, try reducing the title font size or increasing the component height.
The chart resizes horizontally to fit its container. Drag the component wider for more breathing room between bars.
Y Axis Value must be a number property. If bars are all the same height, check that the Y Axis Value is mapped to a number field, not a text field.
Troubleshooting
Chart shows nothing
No collection selected or collection is empty
Check "What is this a chart of?" and verify the collection has records
Bars are all the same height
Y Axis Value is a text field, not a number
Make sure Y Axis Value is mapped to a number property
Bar action doesn't trigger
Action not configured
Check that a Bar Action is set in the property panel
Title/subtitle overlap
Font size too large for chart height
Reduce font size or increase the component height
X axis labels overlap
Too many bars or labels too long
Reduce the number of records or shorten label text
Learn More
Another feature of bar charts and line graphs is the option to insert custom math formulas. For example, if you want to show a bar graph of each trip's cost per day (which isn't a preexisting data entry) you can divide a dynamic text of Trip Cost/ Number of Days in the Trip.
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?