Streamgraph

A streamgraph is a stacked area chart with a flowing, centre-anchored baseline — the signature look for music listening history, topic trends and budget composition over time.

Module setup. Auto-loaded by the main mates-charts entry (Tier A). Bare-core users import the module explicitly.

import "highcharts/modules/streamgraph";

Usage

Create a chart atom with standard Highcharts options, then render Chart(chart) anywhere in a mates template. Every later chart.set(…) or chart.update(…) re-renders the chart — no imperative Highcharts code.

Quick start

import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "streamgraph"
    },
    title: {
        text: "Listening by genre"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "2019",
            "2020",
            "2021",
            "2022",
            "2023",
            "2024"
        ]
    },
    yAxis: {
        visible: false,
        title: {
            text: ""
        }
    },
    plotOptions: {
        series: {
            fillOpacity: 0.75,
            lineWidth: 0
        }
    },
    series: [
        {
            type: "streamgraph",
            name: "Electronic",
            data: [
                12,
                18,
                15,
                24,
                30,
                38
            ]
        },
        {
            type: "streamgraph",
            name: "Rock",
            data: [
                20,
                16,
                14,
                12,
                10,
                9
            ]
        },
        {
            type: "streamgraph",
            name: "Jazz",
            data: [
                6,
                8,
                11,
                9,
                14,
                12
            ]
        },
        {
            type: "streamgraph",
            name: "Classical",
            data: [
                4,
                5,
                7,
                6,
                9,
                11
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Live examples

Classic streamgraph Highcharts demo ↗

One series per stream; the module anchors the baseline to swing around zero automatically — no stacking options needed.

TypeScript

import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "streamgraph"
    },
    title: {
        text: "Listening by genre"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "2019",
            "2020",
            "2021",
            "2022",
            "2023",
            "2024"
        ]
    },
    yAxis: {
        visible: false,
        title: {
            text: ""
        }
    },
    plotOptions: {
        series: {
            fillOpacity: 0.75,
            lineWidth: 0
        }
    },
    series: [
        {
            type: "streamgraph",
            name: "Electronic",
            data: [
                12,
                18,
                15,
                24,
                30,
                38
            ]
        },
        {
            type: "streamgraph",
            name: "Rock",
            data: [
                20,
                16,
                14,
                12,
                10,
                9
            ]
        },
        {
            type: "streamgraph",
            name: "Jazz",
            data: [
                6,
                8,
                11,
                9,
                14,
                12
            ]
        },
        {
            type: "streamgraph",
            name: "Classical",
            data: [
                4,
                5,
                7,
                6,
                9,
                11
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Theme river (smooth streams)

Marker-free streams with high fill opacity — the "theme river" look for spend or traffic composition.

TypeScript

import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "streamgraph"
    },
    title: {
        text: "Infrastructure spend"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "Q1",
            "Q2",
            "Q3",
            "Q4"
        ]
    },
    yAxis: {
        visible: false,
        title: {
            text: ""
        }
    },
    plotOptions: {
        series: {
            fillOpacity: 0.7,
            lineWidth: 0,
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "streamgraph",
            name: "Compute",
            data: [
                30,
                34,
                41,
                48
            ]
        },
        {
            type: "streamgraph",
            name: "Storage",
            data: [
                18,
                17,
                19,
                22
            ]
        },
        {
            type: "streamgraph",
            name: "Network",
            data: [
                9,
                11,
                10,
                13
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Options reference

mates-charts passes options straight through to Highcharts — these are the keys that matter for streamgraph charts. See the full Highcharts API for everything else.

Option	Type	Default	Description
`chart.type`	"streamgraph"	—	Selects the streamgraph series type.
`series[].data`	number[]	—	One value per x position — stacking is handled by the series.
`plotOptions.series.fillOpacity`	number	0.75	Stream transparency (0–1).
`plotOptions.series.lineWidth`	number	0	Outline the streams; 0 = pure fills.
`plotOptions.series.marker.enabled`	boolean	false	Streamgraphs read best without point markers.
`legend.enabled`	boolean	true	Show one legend entry per stream.