Line chart

Usage guidelines

Use line charts to show trends over time or compare several data sets. It is easier to see smaller changes in line charts than it is in bar charts.

Use line charts to compare continuous data, like data over a period time.

It is important to consiously decide on a good interval for your data. The best way to do this is to test out different intervals and then compare which one shows the a trend.

Do not use line chart if your main goal is to represent the volume of the data. Instead use a bar chart.

Baseline

Line charts do not always need to start from zero, because the main goal is to see the change in value, not the size of volume. However in some instances you still have to start at 0 if it is critical in the interpretation of the data trend.

Number of lines

As a rule of thumb we suggest not using more than 4 data sets in a single chart. This is because, the more data you plot, the more difficult it is to interpret. Alternatively, you can still tell a data stoy by highlighting certain data points. Another alternate solution is to split them into a collection of smaller line charts.

Colors

Color helps with the interpretation and distinction of line charts. However, using too many colors and lines increases the users cognitive load. To limit the cognitive load we recommend to use 4 or less colors and data sets.

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

Behavior

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

Chart variations

Not what you’re looking for? Here are some line chart alternatives.

• 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: use it to display a part-to-whole breakdown of quantitative values for different categories. The whole could represent 100% or an absolute value.

Line charts plot data at regular intervals connected by lines from left to right to demonstrate changes in value.

Usage

Importing

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

Basic use

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

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

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

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

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

API

Props

Events

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