# Stacked Barchart

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

## 🧭 Overview

Stacked bar charts are used to show how different components contribute to a total across categories. They help illustrate part-to-whole relationships while preserving the ability to compare overall category values.

> 📊 Example Use Case
>
> * Customer feedback volume broken down by sentiment
> * Feature requests grouped by user type or plan tier
> * Monthly signups segmented by acquisition channel

### ⭐ Key Features

What Makes This Chart a Standout?

* **Automated Calculations:** This chart automatically calculates the total for each label—no manual work needed.
* **Flexible Display Options:** Viewing time-based data? Try switching the chart to a vertical layout 🗓️.
* **Horizontal or Vertical? Your Choice!** While we used to display this chart horizontally, don’t forget you can easily switch to a vertical view!

## Configuration

{% tabs %}
{% tab title="New Stacked Barchart" %}
**Learn how to create a stacked 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/QrLDknI0v6yLtNcA8hpO>" flowId="QrLDknI0v6yLtNcA8hpO" %}

**Chart Configuration Step-by-Step**

|                           | Option                  | How does it work?                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Bar orientation**       |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | Vertical/Horizontal     | The chart can be displayed either horizontally or vertically.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **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> |
|                           | 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 segment             | The bar segment represents a subcategory within each bar, corresponding to a column in your dataset—for example, 'Region' or 'Status'. Each segment stacks within the main bar to show how the total value is divided among its parts.                                                                                                                                                                                                                                                                                         |
|                           | 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 .2f format, meaning they are shown with two decimal places.</p><p><strong>Example:</strong><br>A value of 3.14159 will be displayed as 3.14 when using .2f 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.                                                                                                                                                                                                                                                                                                                                                                |
|                           | Order segment           | The order segment defines the sequence in which the stacked segments appear within each bar. It corresponds to a column in your dataset, such as 'Priority' or 'Stage', and affects the visual arrangement from bottom to top.                                                                                                                                                                                                                                                                                                 |
|                           | Reverse segment order   | The reverse segment inverts the stacking order of the segments within each bar. This can help emphasize certain values by bringing them to the top or bottom, depending on the chosen display order.                                                                                                                                                                                                                                                                                                                           |
|                           | Show value on segment   | Displays all values above the line for easy visibility.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
|                           | Reverse height order    | Reverse height order flips the position of the bars based on their total value—placing the largest at the bottom (or left, in horizontal layout) and the smallest at the top (or right). This can help highlight lower values or change the visual emphasis of the chart.                                                                                                                                                                                                                                                      |
| **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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| {% endtab %}              |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |

{% tab title="Legacy Stacked Barchart" %} <mark style="color:red;">**\***</mark>**Mandatory parameters**

| Section                         | Option                                        | Configuration tutorial                                                                                                                  |
| ------------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|                                 | Dataset<mark style="color:red;">**\***</mark> | Select the dataset used by the chart                                                                                                    |
|                                 | Label<mark style="color:red;">**\***</mark>   | <p>This will define the name of each of the bars you want to display.</p><p>Select the column containing bar label</p>                  |
|                                 | Groups<mark style="color:red;">**\***</mark>  | Your groups of choice                                                                                                                   |
|                                 | Value<mark style="color:red;">**\***</mark>   | Select the column containing the value                                                                                                  |
| Legend                          | Display Legend                                | Toggle to activate legend display                                                                                                       |
| Legend                          | Default selected bar                          | Choose the first, last or the name of the label                                                                                         |
| Legend                          | Additional info                               | Add another column for more information on the legend                                                                                   |
| Sort                            | Sort bars                                     | Use it to order bars                                                                                                                    |
| Sort                            | Labels order                                  | Use it to order labels                                                                                                                  |
| Sort                            | Groups order                                  | Use it to order groups                                                                                                                  |
| Groups                          | Groups additional info                        | Add another column for more information on the group                                                                                    |
| Packs (Horizontal Display Only) | Packs                                         | Group labels together based on a column                                                                                                 |
| Packs (Horizontal Display Only) | Packs order                                   | Order pack based on a column, on an advanced order or a custom order                                                                    |
| Packs (Horizontal Display Only) | Display packs names                           | Toggle to display packs names                                                                                                           |
| Lines (vertical display only)   | X axis                                        | Use to choose X axis same as bar labels                                                                                                 |
| Lines (vertical display only)   | Y axis                                        | Use to choose Y axis                                                                                                                    |
| Lines (vertical display only)   | Smooth line                                   | Toggle to interpolate between poinfs                                                                                                    |
| Lines (vertical display only)   | Show all values on line                       | Toggle to show all values on line                                                                                                       |
| Lines (vertical display only)   | Use same scale for bars and lines             | Toggle to use same scale for bars and lines                                                                                             |
| Enrich chart                    | variation                                     | Add a variation in your data with your evolution values                                                                                 |
| Enrich chart                    | URL link                                      | Add url link to bars label                                                                                                              |
| Display                         | Custom Date format (for date labels)          | <p>This option lets you display your dates just the way you want.<br>Insert d3 time format (.i.e. ‘%Y’ to display just years.)</p>      |
| Display                         | Hide bar total                                | Toggle to hide bar total                                                                                                                |
| Display                         | Hide empty groups                             | Toggle to hide empty groups                                                                                                             |
| Display                         | Display all values                            | Toggle to display all values included negative values                                                                                   |
| Display                         | Recycle groups colors                         | Reuse groups colors when chart data changes (filters changes for example)                                                               |
| Display                         | Highlight selected bar                        | Toggle to display rectangle around selected bar                                                                                         |
| Display                         | Choose display direction                      | Choose a vertical or horizontal display direction                                                                                       |
| Display                         | Size                                          | Define the chart size when having multiple ones                                                                                         |
| Display                         | Mobile size                                   | Define the chart size when having multiple ones on mobile                                                                               |
| Display                         | Custom CSS class                              | Set a custom CSS class to target this specific chart with CSS                                                                           |
| Tutorial                        | Enter an ID                                   | <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> |
| Tutorial                        | Enter a message                               | Enter your message \| This will be displayed to your users                                                                              |
| Tutorial                        | Always show this tutorial                     | By default the tutorial is shown once only                                                                                              |
| {% endtab %}                    |                                               |                                                                                                                                         |

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

| **⭐️ New**              | **Legacy**              |
| ----------------------- | ----------------------- |
| **Bar category**        | Label                   |
| Order bars              | Labels order            |
| Change date format      | Custom date tick format |
| **Bar segment**         | Groups                  |
| **Bar height**          | Value                   |
| Order segments          | Groups order            |
| Reverse segment order   |                         |
| Show value on segment   | Display all values      |
| Reverse height order    | Sort bars               |
| Add complementary value | Additional info         |
| Add user chart guide    | Tutorial                |
| {% endtab %}            |                         |
| {% endtabs %}           |                         |