Stacked bar chart

Usage guidelines

The main purpose of stacked bar charts is to compare total values across various categories. It allows you to first see the totals of the category and then at a closer look you get a better understanding the proportions within the category.

Use stacked bar chart to display a part-to-whole breakdown of quantitative values for different categories.

It can be use to track data over time if the understanding totals is the main goal.

If your main goal is to compare individual values, then use grouped bar charts instead. This is because it is easier to compare individual values once they are plotted against the same baseline.

If your main goal is to show that the total of a category is larger than another one over time, then use a line chart instead. This is because stacked bar charts make it difficult to follow changes of categories over time.

For width, spacing, orientation and baseline see bar chart guidelines.

Absolute value vs 100%

The values in this chart can be an absolute value or 100% value. This depends on the story you want to tell.

Absolute values: Use when the most important information to display is the total. In this case each subcategory will be represented by the absolute value and the ratios becomes secondary.

100% values: Use when the most important information to display is the percentages. In this case each subcategory will be represented by the percentage value and the absolute value becomes secondary. Avoid using 100% values if there is missing data point, because it defeats the main purpose of the chart.

Order

Keep the order of the colors the same over all the bars. Depending on the context of your data it could be in ascending/descending order or based on a natural order. Think of which data is most importance to be more easily read and place those at the baseline, as it’s easier to judge.

Colors

Color can distract the reader by implying additional meaning where none exists. Instead, color should be used with purpose. Since the main goal is to show the total, do not use too many colors, else it becomes distractive.

See more details on which exact colors we use for which elements.

Behavior

Examples of behavior that is unique for the stacked bar chart. For loading, error and empty states check behavior guidelines.

Chart variations

Thinking that you might need something else and not a stacked bar chart?

• Bar chart: use it to display quantitative values for different categories. It is best if you need to compare different categories.
• Grouped bar chart: use it when two or more data sets are displayed side-by-side and grouped together under categories on the same axis.

Stacked bar chart shows one or more sets of data represented by discrete stacks of bars at regular intervals.

Usage

Importing

import { LumeStackedBarChart } from '@adyen/lume';

Basic use

To generate a simple bar chart with default settings, simply pass the data and labels props.

<template>
  <lume-stacked-bar-chart
    :data="data"
    :labels="labels"
  />
</template>

<script
  lang="ts"
  setup
>
  import { ref } from 'vue';

  const data = ref([
    {
      label: 'My first dataset',
      color: 'royalblue',
      values: [10, 30, 20, 50, 40],
    },
    {
      label: 'My second dataset',
      color: 'violet',
      values: [40, 50, 20, 30, 10],
    },
  ]);

  const labels = ref(['Jan', 'Feb', 'Mar', 'Apr', 'May']);
</script>

API

Props

Events

This chart extends the Events API from the LumeChart core component.