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>

Stacked Bars

Stack items side-by-side using .bar chart.

<table class="charts-css bar multiple stacked">
  ...
</table>

Simple Stacked Bars

Continent	#1	#2	#3	#4
America	50$	50$	30$	20$
Asia	30$	30$	30$	30$
Europe	40$	25$	45$	30$
Africa	20$	20$	20$	20$

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #stacked-example-1 { height: 200px; max-width: 400px; margin: 0 auto; --heading-size: 2.5rem; --color-1: rgba(255, 200, 0, 0.6); --color-2: rgba(255, 150, 0, 0.6); --color-3: rgba(255, 75, 0, 0.6); --color-4: rgba(255, 0, 0, 0.6); } #stacked-example-1 caption { font-weight: bold; }

Percentage Stacked Bars

Continent	#1	#2	#3	#4
America	50$	50$	30$	20$
Asia	30$	30$	30$	30$
Europe	40$	25$	45$	30$
Africa	20$	20$	20$	20$

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #stacked-example-2 { height: 200px; max-width: 400px; margin: 0 auto; --heading-size: 2.5rem; --color-1: rgba(255, 200, 0, 0.6); --color-2: rgba(255, 150, 0, 0.6); --color-3: rgba(255, 75, 0, 0.6); --color-4: rgba(255, 0, 0, 0.6); } #stacked-example-2 caption { font-weight: bold; }

Stacked Columns

Stack items atop one another using .column chart.

<table class="charts-css column multiple stacked">
  ...
</table>

Simple Stacked Columns

Continent	#1	#2	#3	#4
America	50$	50$	30$	20$
Asia	30$	30$	30$	30$
Europe	40$	25$	45$	30$
Africa	20$	20$	20$	20$

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #stacked-example-3 { height: 300px; max-width: 300px; margin: 0 auto; --heading-size: 2.5rem; --color-1: rgba(255, 200, 0, 0.6); --color-2: rgba(255, 150, 0, 0.6); --color-3: rgba(255, 75, 0, 0.6); --color-4: rgba(255, 0, 0, 0.6); } #stacked-example-3 caption { font-weight: bold; }

Percentage Stacked Columns

Continent	#1	#2	#3	#4
America	50$	50$	30$	20$
Asia	30$	30$	30$	30$
Europe	40$	25$	45$	30$
Africa	20$	20$	20$	20$

Open in:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #stacked-example-4 { height: 300px; max-width: 300px; margin: 0 auto; --heading-size: 2.5rem; --color-1: rgba(255, 200, 0, 0.6); --color-2: rgba(255, 150, 0, 0.6); --color-3: rgba(255, 75, 0, 0.6); --color-4: rgba(255, 0, 0, 0.6); } #stacked-example-4 caption { font-weight: bold; }

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>

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>