Stacked

Stacked charts place 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 is to the total amount.

There are two types of stacked charts:

• Simple stacked chart - each item is placed after the previous one. The total number of items equals the items added together. This is ideal for comparing groups.

• Percentage stacked chart - shows the percentage as a whole for each group. These charts are plotted using the percentage of each item within each group. This makes it easier to see the relative differences between quantities in each group.

Using Stacked Charts

By definition, stacked views can be applied only on multiple datasets (with .multiple class). A single dataset has nothing to stack.

To display a stacked view simply use the .stacked class.

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

Stacked Bars

Stack items side-by-side using a .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 { width: 100%; max-width: 400px; margin: 0 auto; } #stacked-example-1 .bar { --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); --aspect-ratio: 21 / 9; } #stacked-example-1 .bar caption { font-weight: bold; padding-block-end: 1rem; }

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 { width: 100%; max-width: 400px; margin: 0 auto; } #stacked-example-2 .bar { --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); --aspect-ratio: 21 / 9; } #stacked-example-2 .bar caption { font-weight: bold; padding-block-end: 1rem; }

Stacked Columns

Stack items atop one another using a .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 { width: 100%; max-width: 300px; margin: 0 auto; } #stacked-example-3 .column { --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); --aspect-ratio: 1 / 1; } #stacked-example-3 .column caption { font-weight: bold; padding-block-end: 1rem; }

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 { width: 100%; max-width: 300px; margin: 0 auto; } #stacked-example-4 .column { --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); --aspect-ratio: 1 / 1; } #stacked-example-4 .column caption { font-weight: bold; padding-block-end: 1rem; }

Simple vs. Percentage

To change the display from a simple stacked view to a percentage stacked view, change the --size variable.

For a simple view, we divide by the total number we want to compare the group to:

<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 a percentage view, we divide by the relative number of each group (each <tr>), which totals the amount of 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>