Skip to content

Stacked area chart

TIP

Basic data visualization rules are described in the Chart principles.

Description

Area chart visualizes a trend and the ratio of quantitative indicators over a period of time. It can be used instead of Line chart when it is important to demonstrate the ratio of parts to the whole.

Use stacked area chart when, in addition to data amount, you need to display the parts to the whole ratio.

Important points to keep in mind when presenting data as an area chart:

  • A chart with areas shall be used when you need to show a larger picture of the data. For example, line charts can be used to show the change in a population over time, while charts with areas are excellent for demonstrating the total volume of population over a time period.
  • Try not to use too many categories (it isn’t recommended to use more than 4 categories). In such cases, it is better to use a line chart as it provides a cleaner and clearer data reading.
  • Don't forget to clearly name the chart so that the axes are understandable enough.

Appearance

By default, we show a chart with straight lines. This view facilitates reading the trend; this is what most people look at the chart for.

TIP

Add a possibility to select either straight or smooth line type in the widget settings.

ExampleStyles
area chart without dotsLine thickness is 3px. Background color under the line is the color of the line with 0.2 transparency.

It is recommended to display the dots on lines either when there are few of them (one or two), or when data collection is irregular.

ExampleStyles
area chart with dotsDot size is 8px * 8px, border: 2px solid var(--chart-grid-border). When hovering, the point increases to 12px * 12px.

Interaction

When you hover over the chart area, a vertical guide line is shown at the nearest point; this point is enlarged itself, and a tooltip with detailed data for the point appears next to it.

TIP

To see detailed information about tooltip for charts see Chart principles or Line chart.

Edge cases

Here you will find the states for some specific cases. All other "empty states" for widgets are specified in Error & n/a widget states.

One value

For this case enable the display of dots on the chart by default.

one-dot

Styles

  • Point size is 8px * 8px. When hovering, the point increases to 12px * 12px.
  • The line has the dashed border style and --chart-palette-order-other-data color.

Two values

For this case enable the display of dots on the chart by default.

Example 1 is for the case when there is data for two non-near dates.

two-dots

Example 2 is when there is data for one after another dates.

two-dots

Null values

If all values on the chart are zero, then show the trend line on the zero axis.

TIP

Zero is also data. 0 ≠ n/a.

null-data

No data

TIP

When there is no data, you can't draw a zero line. Zero is also data. 0 ≠ n/a.

In the area without data, show a dashed line between known dots. If the not available period is at the beginning or end of the chart, then the lines must be horizontal.

not available data

When user hovers over a dot without data, show the tooltip with the n/a value. We recommend you to add a message why there is no data, and when it will be available, if possible.

partially-data

Initial data loading

When the chart is loading for the first time, show Skeleton instead of the chart.

If the chart has a title, show it during loading. The user will have an idea of what is being loaded and whether they need to wait for the loading process to complete.

For more information about this state, refer to Skeleton.

Use the --skeleton-bg color token for the skeleton background color.

skeleton

Released under the MIT License.

Released under the MIT License.