# Bar Chart ***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**](https://help.adalo.com/database) 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) *** ![](/files/-LiiOr92gKzFNFTNjNQT) *** ### 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. ![Step 3](/files/-LihxQfVxLwtrLB_9Vxm) *** ### 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 | 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 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 | Issue | Cause | Fix | | ---------------------------- | --------------------------------------------- | ---------------------------------------------------------------------- | | 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](/component-basics/inserting-dynamic-text/how-to-create-a-custom-math-formula.md). 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. * [**Line Chart**](/component-basics/marketplace-components/line-chart.md) * [**Pie Chart**](/component-basics/marketplace-components/pie-chart.md) * [**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/bar-chart.md?ask= ``` 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.