# Stacked Bar, Horizontal Stacked Bar, and Normalized Horizontal Stacked Bar

## Introduction

The **Stacked Bar Chart** displays data of one series, separated into different categories ("stacks") as stacked bars:

![Stacked Bar Chart](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48076417490/original/0De0jq8DIAQnFxPqi4hrw5TfLTek5YQvAw.png?1608025196)

When selecting **Horizontal stacked Bar** the same is displayed horizontally:

![Horizontal stacked Bar Chart](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48076442279/original/DC769egPUOxt0LywfPMU2xFwYG8SFwG4Sg.png?1608031256)

The **Normalized horizontal stacked Bar Chart** (also known as *100% stacked bar*) shows the stacks' size as the proportioned amount of the total amount, i.e. the percentage of the stack's value based on the total value of all the stacks in the corresponding bar:

![Normalized horizontal stacked Bar Chart](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48076443334/original/p2ZLd9uodvTPVjx2cFd0JJJ1ckVc_wcGOg.png?1608031508)

## Expected Data and Graph Designer

All the variations of the Stacked Bar Charts expect data in a three column format, with the x-axis (for the (Normalized) Horizontal stacked Bar Chart: y-axis; the following mentions of *x-axis* are analogous for the *y-axis* for the (Normalized) Horizontal stacked Bar Chart) value as the first column, the stack name as the second column, and the value of the stack as the third column:

| Date                  | Type               | <p>Amount<br></p> |
| --------------------- | ------------------ | ----------------- |
| 2020-10-01            | <p>none<br></p>    | 20                |
| 2020-10-01            | <p>correct<br></p> | 12                |
| 2020-10-01            | <p>wrong<br></p>   | 5                 |
| 2020-10-02            | <p>none<br></p>    | 24                |
| <p>2020-10-02<br></p> | wrong              | 4                 |
| <p>2020-10-03<br></p> | none               | 1                 |

So there needs to be a row for every x-axis value and corresponding stack. If a stack does not have a value for a certain x-axis value it can be left out as shown in the example above (stack *correct* for x-axis value *2020-10-02*).

Therefore, new stacks can simply be added by adding a new row with the stack's data for the corresponding x-axis value.

This required format can be achieved in SQL with a GROUP BY statement which groups by the x-axis value and the stack name and forms the sum of the stack value.

The selection of the x-axis in the Graph Designer does not have an effect.

Please make sure that all amounts are numbers and not strings. If your chart does not look as you expected, please cast the amount as integer as shown in this SQL query example:

```sql
SELECT Date, Type, CAST(amount as INT) as Amount FROM yourtable;
```