# Barchart

<figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-6a020946cfa286bc558e4eb16de3378e90590931%2Fillustration_barchart_NEW.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

## 🧭 Overview

Bar charts are used to compare data, identify trends, simplify complex information, and highlight differences between categories. Their clear visual structure makes interpretation easy, allowing insights to be quickly and effectively understood.

> 📊 Example Use Case
>
> * Sales by region or product type
> * Monthly signups by acquisition channel
> * Inventory counts by category

## ⭐ Key Features

* **Categorical Comparison**: Visualize one or more categories using bars of varying height.
* **Custom Ordering**: Sort bars by column value or custom measure.
* **Grouping**: Group data by another dimension (e.g., monthly product sales grouped by year).
* **Display Options**: Toggle values above bars for quick reference.
* **Sentiment Coloring**: Apply positive/neutral/negative color codes for immediate visual cues.
* **Precision & Units**: Control number formatting and unit display for better KPI clarity.

## Configuration

{% tabs %}
{% tab title="New Barchart" %}
**Learn how to create a barchart using the new design with this step-by-step guide.**\
Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.

{% @arcade/embed url="<https://app.arcade.software/share/sdeuIpxcvf0SGfKdWLJV>" flowId="sdeuIpxcvf0SGfKdWLJV" %}

**Chart Configuration Step-by-Step**

|                           | Option                  | How does it work?                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Dimension**             |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | Bar category            | The bar category corresponds to a column in your dataset, such as 'Product Type'.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
|                           | Order bars              | <p>This option allows to order bars either by column or by custom value.</p><p><em>By column</em></p><p>Bars are ordered based on the selected column. By default, they follow an ascending order—starting with numerical categories, followed by alphabetical (A-Z). This order can be reversed.</p><p><em>By custom value</em></p><p>Bars are ordered based on the selected measure. For example, if the category is 'October' and the bar height is '10', you need to set the value to 10 for this bar to appear first.</p> |
|                           | Group bars              | Bars are grouped by category. For example, product types tracked monthly over a long period can be grouped by year.                                                                                                                                                                                                                                                                                                                                                                                                            |
|                           | Change date format      | You can change the display format by selecting an option from the dropdown. Common D3 formats are suggested. *Note: Your column must be in a date format for this option to work.*                                                                                                                                                                                                                                                                                                                                             |
| **Measure**               |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | Bar height              | The bar height represents a value from your dataset. You can select an aggregation method from the menu, which may vary depending on the chart type.                                                                                                                                                                                                                                                                                                                                                                           |
|                           | Precision               | <p>Precision determines the level of detail in how your values are displayed. By default, measures use a <code>.2f</code> format, meaning they are shown with two decimal places.</p><p><strong>Example:</strong><br>A value of <code>3.14159</code> will be displayed as <code>3.14</code> when using <code>.2f</code> formatting.</p>                                                                                                                                                                                        |
|                           | Unit                    | Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.                                                                                                                                                                                                                                                                                                                                                                |
|                           | Sentiment               | <p>Four different sentiment statuses (positive, warning, negative, neutral) can be used to color bars, enhancing visual distinction.</p><p><em>Note: Sentiments can be customized in the app theme.</em></p>                                                                                                                                                                                                                                                                                                                   |
|                           | Show value on bar       | Displays all values above the bars for easy visibility.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Additional parameters** |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | ID                      | Unique chart Id                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | Add complementary value | The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment.                                                                                                                                                                                                                                                                                                           |
|                           | Add user chart guide    | Lead your chart viewers through the narrative of your data.                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Chart performance**     |                         | Technical performance                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

**Style Configuration**

|              | Option | How does it work?                                                |
| ------------ | ------ | ---------------------------------------------------------------- |
| **Theme**    |        |                                                                  |
|              | Bars   | Customize the bar color to align with your branding preferences. |
| {% endtab %} |        |                                                                  |

{% tab title="Legacy Barchart" %}
This page provides a step-by-step guide for creating a barchart using the legacy design.

<mark style="color:red;">\*</mark>**Mandatory parameters**

<table><thead><tr><th width="144.33333333333331">Section</th><th width="247">Option</th><th>Configuration tutorial</th></tr></thead><tbody><tr><td></td><td>Dataset<mark style="color:red;">*</mark></td><td>Select the dataset used by the chart</td></tr><tr><td></td><td>Label<mark style="color:red;">*</mark></td><td><p>this will define the name of each of the bars you want to display.</p><p>Select the column containing bar label</p></td></tr><tr><td></td><td>Value<mark style="color:red;">*</mark></td><td>Select the column containing the value</td></tr><tr><td></td><td>Heatbar - by using Sentiments</td><td>Add a heat bar to highlight variation/evolution of different categories by using sentiments (<a data-mention href="../../advanced-chart-configuration/add-units-precisions-and-sentiments">add-units-precisions-and-sentiments</a>)</td></tr><tr><td></td><td>Heatbar - with custom labels (code mode)</td><td>Switch in code mode and add a <code>labels</code> array to the sentiment configuration. The values of the labels array will be matched with the values of the range array.</td></tr><tr><td>Legend</td><td>Display legend</td><td>Toggle to activate legend display</td></tr><tr><td>Legend</td><td>Default bar selected</td><td>Choose the first, last or the name of the label</td></tr><tr><td>Legend</td><td>Additional info</td><td>Add another column for more information on the legend</td></tr><tr><td>Sort</td><td>Bars order - Configuration type</td><td>Use it to order bars</td></tr><tr><td>Groups</td><td>Groups</td><td><p>This option let you group multiple columns together</p><p>Select a column containing grouping of bars</p></td></tr><tr><td>Groups</td><td>Groups order</td><td>Use it to order groups</td></tr><tr><td>Groups</td><td>Groups additional info</td><td>Add another column for more information on the group</td></tr><tr><td>Display</td><td>Display all values on top of bars</td><td>Tick to display values on top of bars</td></tr><tr><td>Display</td><td>Scroll graph to the right</td><td>Tick to change the animation when arriving on the chart</td></tr><tr><td>Display</td><td>Scale</td><td>Use it to define the bars scale. Choose 2 bounds if you’re displaying %, try a 0 to 100</td></tr><tr><td>Display</td><td>Disable zoom in animation</td><td>The chart will be zoomable, but will not transition to a zoomed state. All bars will remain visible.</td></tr><tr><td>Display</td><td>Disable zoom</td><td>he chart will not be zoomable. All bars will remain visible.</td></tr><tr><td>Display</td><td>Recycle group colors</td><td><p>Reuse groups color when chart data changes (filters or requesters).</p><p>Note: groups must be setup, see Groups section</p></td></tr><tr><td>Display</td><td>Custom date tick format (for date labels)</td><td>This option lets you display your dates just the way you want.<br>Insert d3 time format (.i.e. ‘%Y’ to display just years.)</td></tr><tr><td>Display</td><td>Size</td><td><p>Enter a proportion of the total screen</p><p>Use on multiple charts onlyEnter a number from 0 to 1</p></td></tr><tr><td>Display</td><td>Mobile size</td><td><p>Enter a proportion of the total mobile screen.</p><p>Use on multiple charts onlyEnter a number from 0 to 1</p></td></tr><tr><td>Display</td><td>Custom CSS class</td><td>amazing-class | Set a custom CSS class to target this specific chart with CSS</td></tr><tr><td>Tutorial</td><td>ID</td><td><p>Enter an ID.</p><p>Change the ID to display the tutorial again.</p><p>All tutorials with the same ID will be displayed only once.</p></td></tr><tr><td>Tutorial</td><td>Message</td><td>Enter your message | This will be displayed to your users</td></tr><tr><td>Tutorial</td><td>Always show this tutorial</td><td>By default the tutorial is shown once only</td></tr></tbody></table>
{% endtab %}

{% tab title="New vs. Legacy Configuration" %}

<table><thead><tr><th width="247">⭐️ New</th><th>Legacy</th></tr></thead><tbody><tr><td>Bar category</td><td>Label</td></tr><tr><td>Order bars</td><td>Bars order - Configuration type</td></tr><tr><td>Group bars</td><td>Groups</td></tr><tr><td>Change date format</td><td>Custom date tick format</td></tr><tr><td>Bar height</td><td>Value</td></tr><tr><td>Show value on bar</td><td>Display all values on top of bars</td></tr><tr><td>Add complementary value</td><td>Additional info</td></tr></tbody></table>
{% endtab %}
{% endtabs %}