Examples · Streamgraph

Streamgraph examples

Listening habits change with the season. In this fictional year, electronic music grows through summer while ambient listening returns in autumn. The colored widths show hours played, and the whole stream widens when total listening rises.

When to use it

Show a seasonal change in the mix of a shared total
Follow several non-negative flows on the same time scale

Not the right shape?

Use Line to compare exact values or the distance between layers. Use Stacked columns to compare period totals against a common zero. A streamgraph has no shared zero line; read exact values in its tooltip or data table.

Real-world examples

Visits by channel

Illustrative monthly visits. Email peaks after two campaigns; search grows across the year.

Open in maker with this data

View the spec

{
  "type": "streamgraph",
  "theme": "editorial",
  "title": "How readers reached the site",
  "source": "Illustrative data",
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    "series": [
      {
        "name": "Search",
        "values": [
          120,
          140,
          160,
          190,
          210,
          240,
          270,
          300,
          330,
          350,
          390,
          420
        ]
      },
      {
        "name": "Direct",
        "values": [
          80,
          85,
          90,
          88,
          95,
          100,
          105,
          110,
          108,
          115,
          120,
          125
        ]
      },
      {
        "name": "Email",
        "values": [
          30,
          35,
          100,
          50,
          40,
          35,
          45,
          130,
          60,
          45,
          55,
          70
        ]
      }
    ]
  }
}

Support workload

Illustrative request counts. The April setup peak fades while billing requests increase in December.

Open in maker with this data

View the spec

{
  "type": "streamgraph",
  "theme": "editorial",
  "title": "Which requests filled the support queue?",
  "source": "Illustrative data",
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    "series": [
      {
        "name": "Setup",
        "values": [
          35,
          45,
          65,
          90,
          70,
          45,
          30,
          25,
          25,
          30,
          35,
          40
        ]
      },
      {
        "name": "Billing",
        "values": [
          20,
          22,
          21,
          25,
          28,
          27,
          30,
          32,
          35,
          40,
          60,
          80
        ]
      },
      {
        "name": "How-to",
        "values": [
          40,
          42,
          44,
          48,
          50,
          52,
          55,
          54,
          52,
          50,
          48,
          45
        ]
      }
    ]
  }
}

Open this chart in a maker Streamgraph maker from scratch

Questions people ask

What does the middle of a streamgraph mean?

The silhouette baseline centers the total width at each period. Its position is a layout choice, not a measured zero. A layer’s thickness represents its value.

Can a streamgraph contain missing or negative values?

This maker requires a non-negative value in every cell. Zero is valid; a missing observation is not zero. Choose Line to retain gaps.

Why can’t I hide a layer?

Removing a layer would leave an empty strip and misrepresent the total flow. Hover to highlight a layer, or switch to Line for legend controls.