# Bar Chart

Bar charts can be created vertically or horizontally, depending on which axis is defined first.

They can be stacked (this is the most common method) or normalised (where each bar fills 100%, and colours within the bar show ratios). Overlapping row view is technically an option, but will likely not show meaningful representations of the data in most cases.

**Basic guidance can be found on the** [**Chart Overview**](/instructions/adding-and-editing-panels/charts-panel.md) **page.**

**Labels can be vertical, horizontal, or diagonal, depending on preference and legibility.** ![](/files/5EnME3Zi5nzoYKUTmRq3)

**Data type can be manually set, if auto is not producing the colour options desired.** ![](/files/6c3pJdICzuuppKjSc8Eo)

**The primary axis can be alpha-sorted in ascending or descending order.**

<figure><img src="/files/dLTL3gMu7GNUt9tr79Ig" alt=""><figcaption><p>X-axis sorted ascending and sorted descending</p></figcaption></figure>

#### Creating a horizontal bar chart

{% embed url="<https://vimeo.com/740512523/7dfc1cdb56>" %}
Creating a horizontal bar chart instead of the default vertical bar chart
{% endembed %}

### Colour views & facets

![](/files/2HLKvvxmgb9ZtMUY7N4s)

<figure><img src="/files/T8AVwFhtMlwB6xCtx100" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/zU0hbTujK274Xjwwr8uL" alt=""><figcaption></figcaption></figure>

### Troubleshooting

If your colours are not showing as expected, there may be a misinterpretation of the data type. Check the Colour Menu and change the Data Type from Auto to another option.


---

# 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.microreact.org/instructions/adding-and-editing-panels/charts-panel/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.
