# Stacked
Stacked charts places the items either atop one another (column chart) or side-by-side (bar chart).
# Stacked Charts
Stacked charts are used to show how a larger group is divided into smaller groups and what the relationship of each part has on the total amount.
There are two types of stacked charts:
Simple stacked chart - each item placed after the previous one. The total item is all the items added together. Ideal for comparing between groups.
Percentage stacked chart - shows the percentage-of-the-whole of each group and are plotted by the percentage of each item to the total amount in each group. This makes it easier to see the relative differences between quantities in each group.
# Using Stacked Charts
By definition, stacked view can be applied only on multiple datasets (with .multiple
class). A single datasets has nothing to stack.
To change the display to stacked view simply use the .stacked
class.
<table class="charts-css multiple stacked">
...
</table>
2
3
# Stacked Bars
Stack items side-by-side using .bar
chart.
<table class="charts-css bar multiple stacked">
...
</table>
2
3
# Stacked Columns
Stack items atop one another using .column
chart.
<table class="charts-css column multiple stacked">
...
</table>
2
3
# Simple vs. Percentage
To change the display between simple stacked view to percentage stacked view, you need to change the --size
property.
For simple view, we divide by the total number we want to compare the group too:
<tr>
<td style="--size: calc(3 / 12);"> </td>
<td style="--size: calc(1 / 12);"> </td>
<td style="--size: calc(5 / 12);"> </td>
</tr>
<tr>
<td style="--size: calc(1 / 12);"> </td>
<td style="--size: calc(4 / 12);"> </td>
<td style="--size: calc(2 / 12);"> </td>
</tr>
2
3
4
5
6
7
8
9
10
For percentage view, we divide by the relative number of each group (each <tr>
), which is to total amount of the group items:
<tr>
<td style="--size: calc(3 / (3 + 1 + 5));"> </td>
<td style="--size: calc(1 / (3 + 1 + 5));"> </td>
<td style="--size: calc(5 / (3 + 1 + 5));"> </td>
</tr>
<tr>
<td style="--size: calc(1 / (1 + 4 + 2));"> </td>
<td style="--size: calc(4 / (1 + 4 + 2));"> </td>
<td style="--size: calc(2 / (1 + 4 + 2));"> </td>
</tr>
2
3
4
5
6
7
8
9
10