# Basic bar chart

The Basic Bar Chart displays data as a series of rectangular bars with heights or lengths proportional to the represented values.

## Usage

Basic Bar Charts are used to compare values. 

{% hint style="info" %}
**Examples**

Basic Bar Charts examples are available in our [Showroom](https://showroom.appfarm.app/ui-components/basic-bar). You can view the demo, as well as access the setup in Appfarm Create. Don't have access? [Register](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Properties

| Property                 | Description                                                                                                                                                                                                                                                                                             |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Dataset Type**         | By default, the datasets are split based on the Dataset Property. Select Static Datasets to define static datasets to split the data on.                                                                                                                                                                |
| **Data Source**          | Select a [data source](/reference/apps/data/data-sources.md) to display as a chart.                                                                                                                                                                                                                     |
| **Filter**               | Apply a [filter](/reference/platform-concepts/filters.md) to the selected data source.                                                                                                                                                                                                                  |
| **Conditional Filters**  | Create conditional filters to apply to the selected data source.                                                                                                                                                                                                                                        |
| **Category Property**    | SSelect a data source to display as X Axis in the chart. Only the data types Boolean, Enumerated Types and Datetime are supported.                                                                                                                                                                      |
| **Hide Empty**           | <p>Visible when <strong>Category Property</strong> is selected.</p><p></p><p>Enable to hide categories without content. </p>                                                                                                                                                                            |
| **Group By**             | <p>Visible when <strong>Category Property of data type Datetime</strong> is selected.</p><p></p><p>Select a dimension to group the data by. If no dimension is selected, all objects will be displayed in the order given by the data source.</p>                                                       |
| **Custom Format**        | <p>Visible when <strong>Category Property of data type Datetime and a Group By dimension</strong> is selected.</p><p></p><p>Define a custom format to override the format of the data source. Check <a href="https://momentjs.com/docs/#/displaying/format/">momentjs</a> for a complete reference.</p> |
| **Datasets**             | <p>Visible when <strong>Dataset Type Static Datasets</strong> is selected.<br></p><p>Define a static dataset to split the data on. If no data source is selected, all the data will be treated as a single dataset.</p>                                                                                 |
| **Value Property**       | <p>Visible when <strong>Dataset Type Default</strong> is selected.</p><p><br>Select a data source to aggregate the data on. If no data source is selected, count will be used by default.</p>                                                                                                           |
| **Aggregation Function** | <p>Visible when <strong>Value Property</strong> is selected.</p><p></p><p>Select one of the functions Count, Sum, Average, Median, Minimum or Maximum to aggregate the data on.</p>                                                                                                                     |
| **Dataset Property**     | <p>Visible when <strong>Dataset Type Default</strong> is selected.<br></p><p>Select a data source to split the data into datasets based on this property. If no data source is selected, all the data will be treated as a single dataset.</p>                                                          |
| **Use Enum Colors**      | <p>Visible when <strong>Dataset Property of type Enumerated Type</strong> is selected.</p><p></p><p>Enable to use the colors defined in each Enum Value.</p>                                                                                                                                            |
| **Limit Datasets**       | <p>Visible when <strong>Dataset Property of type Enumerated Type</strong> is selected.</p><p></p><p>Enable to limit the dataset property by one or more Enum Values.</p>                                                                                                                                |
| **Stack Datasets**       | <p>Visible when <strong>Dataset Property</strong> is selected.</p><p><br>Enable to stack the datasets within one rectangular bar.</p>                                                                                                                                                                   |
| **Title**                | Enter a static title or bind it to a data source, function, date now or date today.                                                                                                                                                                                                                     |
| **Title Position**       | <p>Visible when <strong>Title</strong> is selected.<br></p><p>Position the title on the top, left, bottom or right side of the chart.</p>                                                                                                                                                               |
| **Show Legend**          | Enable to show a legend.                                                                                                                                                                                                                                                                                |
| **Legend Position**      | <p>Visible when <strong>Show Legend</strong> is enabled.</p><p></p><p>Position the legend on the top, left, bottom or right side of the chart.</p>                                                                                                                                                      |
| **Show Uncategorized**   | <p>Visible when <strong>Show Legend</strong> is enabled.<br></p><p>Enable to display uncategorized data as a separate category in the legend.</p>                                                                                                                                                       |
| **Y Axis Interval**      | Set an interval for ticks on the Y Axis. If the interval is too dense to be displayed, some ticks will be removed automatically.                                                                                                                                                                        |


---

# 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://docs.appfarm.io/library/ui-components/basic-bar-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.