Grouped bar chart

Usage guidelines

Like a bar chart, the grouped bar chart is built for showing a distribution of data points or to make comparisons across different categories of data. But it is different because Group bar charts add an extra dimension for comparison.

Use grouped bar charts when you want to compare data using 2 categorical dimensions. For example compare retirement age of men and women across different countries. Where gender is one categorical dimension and country is another one. This way you can focus on:

• comparing retirement age of women and men between each other for a particular country, or
• comparing retirement age of a specific gender across different countries.

There is no conceptual limit to the number of categorical items you can include in a single graph, but practically speaking — using too many categories will put more mental strain on the viewer. We advise to not use more than 4 categories.

Don't use grouped bar charts if you want to compare totals across different categories — think of using stacked bar chart instead.

Bar width and spacing

Baseline

It is important to start all bar charts with 0, otherwise relative comparison becomes really difficult. This is because our eye compares the bar’s length in relation to each other. By starting at the value of zero you maintain the truthfulness of your message.

When the baseline on a bar chart interferes with the perception of differences between bars, then a line chart or dot plot is a good alternative.

Colors

Color is a tool that helps distinguish categories in the grouped bar chart. It is important to be mindful of the palette used to display different data types.

See more details on which colors we use for different data sets.

Behavior

Here are some examples of behaviors that are unique to Grouped bar charts. For other behaviors like loading, error and empty states, check behavior guidelines.

Chart variations

Not what you’re looking for? Here are some grouped bar chart variations.

• Bar chart: use it to display quantitative values for different categories. The main purpose of a bar chart is to compare individual data points with each other.
• Stacked bar chart: use it to display a part-to-whole breakdown of quantitative values for different categories. The whole could represent 100% or an absolute value.
• Multi-line chart: use it to detect trends and patterns, not to display exact quantitative readings

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

Usage

Importing

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

Basic use

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

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

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

  const data = ref([
    {
      label: 'My first dataset',
      color: 'skyblue',
      values: [10, 30, 20, 50, 40],
    },
    {
      label: 'My second dataset',
      color: 'royalblue',
      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.