> For the complete documentation index, see [llms.txt](https://endash-guidance-docs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://endash-guidance-docs.gitbook.io/docs/dashboard/widget-types/bar-chart-type.md).

# Bar (chart type)

## Overview

* The Bar chart is a graphical representation of data in which rectangular bars of varying lengths are used to represent different categories or groups

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2F7yRmv0tX2Xik7b7HJRiq%2Fimage.png?alt=media&amp;token=c17f7f84-3772-46cd-9ffe-8e278d0ed0ac" alt=""><figcaption></figcaption></figure>

* First, click on any "+ Add widget" button to add a widget.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FZkchKttrz5mpjA4Lb9tG%2Fimage.png?alt=media&amp;token=db1eefc7-9804-4e8b-aed8-bd1fe467d27f" alt=""><figcaption></figcaption></figure>

* Click on the Bar chart option.
* Click on the Add widget button to proceed.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FLnXeCt8WYsyjeQMseuwJ%2Fimage.png?alt=media&amp;token=49ca977e-ae4b-4bb5-ba3e-94c6a11ea50b" alt=""><figcaption></figcaption></figure>

* Choose the available Collection or Connection of the data model that has been added.

## Set up your Bar chart

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FMdbQVBbbaf80oVEYkEAV%2Fimage.png?alt=media&amp;token=6330a90e-9c48-4082-a5fc-f1511574b562" alt=""><figcaption></figcaption></figure>

* Click on the X-axis dropdown box and select an available column.
* If you choose a Date type column, the [Time series mode](/docs/dashboard/widget-types/bar-chart-type/bar-chart-time-series-reference-date-preset-and-compare-to-the-past.md) will auto apply to the Bar chart.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FWTUGDvgce2y9aAJ1SIC6%2Fimage.png?alt=media&amp;token=3964280c-e5e4-4e6d-9f56-d695fa44862c" alt=""><figcaption></figcaption></figure>

* Continue to choose any available column in the Y axis.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2F6QniZ4Uu72Fapj8q66et%2Fimage.png?alt=media&amp;token=31b834c5-381a-4ef8-be3f-612411f9a365" alt=""><figcaption></figcaption></figure>

* After the X Axis and Y Axis columns are selected, the Bar chart of the data model will be displayed.
* The Sum formula will be auto-selected. You can change to other [Formula](/docs/dashboard/footer-formula.md) options by clicking on its dropdown box.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FwkxbKVQn0RtLIzWKwDl8%2Fimage.png?alt=media&amp;token=c08de48d-3c25-4deb-98c3-b7021061c507" alt="" width="345"><figcaption></figcaption></figure>

* You can further visualize your Bar chart by clicking on the Group by button and selecting its value.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FinHfbtiCvP7iNvIV9xza%2Fimage.png?alt=media&amp;token=98952477-414f-4eb8-9adb-73eb531cf65e" alt=""><figcaption></figcaption></figure>

* Select any available column for Group by option.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2F7rGMiG3JdV6eKEdw5KC3%2Fimage.png?alt=media&amp;token=2af54a8a-8c5e-4dd9-8bd6-c2ab00e6f7d2" alt=""><figcaption></figcaption></figure>

* Click on the X icon next to the Group by button to delete that value.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FJLtkpaLAheg6vBUpKzjP%2Fimage.png?alt=media&amp;token=ae1b927b-e5e0-43bc-89b8-c75ac3fcc9ac" alt=""><figcaption></figcaption></figure>

* While there is a Group by column, you can click on this button to separate the column based on the X axis.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FSyrOlYoqDEWVQZgfeXup%2Fimage.png?alt=media&amp;token=48b2e80c-495a-469a-8fde-9406c9494a8a" alt=""><figcaption></figcaption></figure>

* Hovering on the bar chart to view the value of the details.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FxHZO4lLIWiewCHlZdkqx%2Fimage.png?alt=media&amp;token=8600d4f7-3d09-4183-b28e-c09addf2d182" alt=""><figcaption></figcaption></figure>

* You can click on the 🖊 icon to [customize](/docs/dashboard/custom-column-configuration.md) the column.

## Change to the Bar chart type from another widget

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2Fem8VksgUWKFhto71iX0u%2Fimage.png?alt=media&amp;token=0294a83d-8b95-4adc-b48d-b05ed15b0a0d" alt=""><figcaption></figcaption></figure>

* The Bar chart option can be selected by opening the Settings slider and then clicking on the Properties option.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FuRAoicGdWKV0LdDrv2BM%2Fimage.png?alt=media&amp;token=502b6f9b-53fb-43bc-9c1f-133b589bb6ce" alt=""><figcaption></figcaption></figure>

* Click on the View type dropdown and choose the Bar chart icon to begin configuring your data model to the Bar chart.

***

<table data-view="cards"><thead><tr><th align="center"></th></tr></thead><tbody><tr><td align="center"><a href="/docs/dashboard/widget-types/bar-chart-type/bar-chart-change-to-other-types.md">Bar chart - Horizontal and Vertical type</a></td></tr><tr><td align="center"><a href="/docs/dashboard/widget-types/bar-chart-type/bar-chart-filter.md">Bar chart - Filter</a></td></tr><tr><td align="center"><a href="/docs/dashboard/widget-types/bar-chart-type/bar-chart-sort.md">Bar chart - Sort</a></td></tr><tr><td align="center"><a href="/docs/dashboard/widget-types/bar-chart-type/bar-chart-time-series-reference-date-preset-and-compare-to-the-past.md">Bar chart - Time series - Reference date preset and Compare to the past</a></td></tr></tbody></table>
