Download Core

Basic streamgraph

Listening hours by genre over two years.

Why it matters inside-out ordering and wiggle offset keep big layers calm; layers morph on update; labels inside wide bands

Chart type
Streamgraph streamgraph
Tier
Free Core
Collection
Streamgraph
Render
Live, site theme
View .md Agent setup
LIVE/streamgraph/basic-streamgraph1 of 4 in Streamgraph

Open the chart without page chrome ↗

Configuration

Raw Standalone 
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "streamgraph",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Pop",
      data: [
        [1704067200000, 19],
        [1706693760000, 21],
        [1709320320000, 25],
        [1711946880000, 29],
        [1714573440000, 30],
        [1717200000000, 29],
        [1719826560000, 32],
        [1722453120000, 27],
        [1725079680000, 23],
        [1727706240000, 23],
        [1730332800000, 15],
        [1732959360000, 9],
        [1735585920000, 14],
        [1738212480000, 13],
        [1740839040000, 6],
        [1743465600000, 10],
        [1746092160000, 17],
        [1748718720000, 14],
        [1751345280000, 20],
        [1753971840000, 23],
        [1756598400000, 20],
        [1759224960000, 29],
        [1761851520000, 30],
        [1764478080000, 33]
      ]
    },
    {
      name: "Rock",
      data: [
        [1704067200000, 31],
        [1706693760000, 25],
        [1709320320000, 29],
        [1711946880000, 30],
        [1714573440000, 30],
        [1717200000000, 27],
        [1719826560000, 16],
        [1722453120000, 18],
        [1725079680000, 15],
        [1727706240000, 14],
        [1730332800000, 6],
        [1732959360000, 7],
        [1735585920000, 6],
        [1738212480000, 12],
        [1740839040000, 15],
        [1743465600000, 19],
        [1746092160000, 27],
        [1748718720000, 24],
        [1751345280000, 21],
        [1753971840000, 30],
        [1756598400000, 31],
        [1759224960000, 29],
        [1761851520000, 30],
        [1764478080000, 30]
      ]
    },
    {
      name: "Jazz",
      data: [
        [1704067200000, 34],
        [1706693760000, 27],
        [1709320320000, 28],
        [1711946880000, 23],
        [1714573440000, 21],
        [1717200000000, 8],
        [1719826560000, 9],
        [1722453120000, 8],
        [1725079680000, 8],
        [1727706240000, 6],
        [1730332800000, 12],
        [1732959360000, 13],
        [1735585920000, 18],
        [1738212480000, 19],
        [1740839040000, 23],
        [1743465600000, 27],
        [1746092160000, 26],
        [1748718720000, 38],
        [1751345280000, 29],
        [1753971840000, 31],
        [1756598400000, 27],
        [1759224960000, 22],
        [1761851520000, 16],
        [1764478080000, 18]
      ]
    },
    {
      name: "Electronic",
      data: [
        [1704067200000, 29],
        [1706693760000, 11],
        [1709320320000, 12],
        [1711946880000, 11],
        [1714573440000, 10],
        [1717200000000, 5],
        [1719826560000, 9],
        [1722453120000, 5],
        [1725079680000, 15],
        [1727706240000, 18],
        [1730332800000, 21],
        [1732959360000, 21],
        [1735585920000, 28],
        [1738212480000, 29],
        [1740839040000, 34],
        [1743465600000, 37],
        [1746092160000, 33],
        [1748718720000, 30],
        [1751345280000, 24],
        [1753971840000, 21],
        [1756598400000, 18],
        [1759224960000, 12],
        [1761851520000, 11],
        [1764478080000, 7]
      ]
    },
    {
      name: "Classical",
      data: [
        [1704067200000, 10],
        [1706693760000, 12],
        [1709320320000, 7],
        [1711946880000, 13],
        [1714573440000, 11],
        [1717200000000, 15],
        [1719826560000, 18],
        [1722453120000, 15],
        [1725079680000, 27],
        [1727706240000, 32],
        [1730332800000, 36],
        [1732959360000, 27],
        [1735585920000, 29],
        [1738212480000, 35],
        [1740839040000, 30],
        [1743465600000, 29],
        [1746092160000, 22],
        [1748718720000, 17],
        [1751345280000, 15],
        [1753971840000, 12],
        [1756598400000, 8],
        [1759224960000, 11],
        [1761851520000, 12],
        [1764478080000, 9]
      ]
    },
    {
      name: "Hip-hop",
      data: [
        [1704067200000, 10],
        [1706693760000, 15],
        [1709320320000, 17],
        [1711946880000, 14],
        [1714573440000, 20],
        [1717200000000, 24],
        [1719826560000, 25],
        [1722453120000, 30],
        [1725079680000, 31],
        [1727706240000, 31],
        [1730332800000, 33],
        [1732959360000, 32],
        [1735585920000, 29],
        [1738212480000, 21],
        [1740839040000, 17],
        [1743465600000, 13],
        [1746092160000, 9],
        [1748718720000, 11],
        [1751345280000, 8],
        [1753971840000, 5],
        [1756598400000, 8],
        [1759224960000, 14],
        [1761851520000, 14],
        [1764478080000, 19]
      ]
    }
  ],
  xaxis: {
    type: "datetime",
    labels: {
      format: "MMM 'yy"
    }
  },
  title: {
    text: "Listening hours by genre"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()