michi-vz chart by chart: area, stack bar and ribbon

This is part 2 of 9 in a series touring all 22 michi-vz chart types, family by family. The series starts in Introducing @michi-vz. Part 1 covered line, range and fan.

Second stop: composition over time. All three charts answer "made of what, and how did that change", at three levels of granularity. Every michi-vz chart takes the same props in React, Vue, Svelte, Angular and plain HTML; the first chart below shows all four flavours, the rest show React to keep things short.

The area chart

The line chart answers "how much". The stacked area chart answers "how much, and made of what". Each category stacks on the previous one, so the top edge tracks the total while the bands show every category's share of it:

One row per period with a numeric value per stacked key, plus the ordered list of keys:

const data = [
  { date: 2019, Search: 42, Social: 15, Direct: 20 },
  // ...one row per year...
  { date: 2025, Search: 126, Social: 70, Direct: 41 },
];
const keys = ["Search", "Social", "Direct"];

import { AreaChart } from "@michi-vz/react";

<AreaChart
  series={data}
  keys={keys}
  width={640}
  height={320}
  xAxisDataType="date_annual"
/>;

• stackOffset: "expand" normalizes every period to 100%, turning the chart into a pure share-of-total view.
• keys sets the stack order bottom to top, and disabledItems removes a category without touching the data.
• fillPeriodTicks draws a tick for every period in the range, so missing years become visible instead of silently compressed.

Full props on the area chart API page.

The vertical stack bar

The same composition story, but discrete: one stacked bar per period. What sets the michi-vz version apart is honesty about absence. A missing segment is not the same as a zero, and the chart can draw an explicit marker for null values instead of quietly collapsing them:

Grouped series; each group contributes one bar slot per date and stacks its keys vertically:

const data = [
  {
    seriesKey: "Renewables",
    seriesKeyAbbreviation: "REN",
    series: [
      { date: 2020, Solar: 30, Wind: 45, Hydro: 62 },
      // ...one row per year...
    ],
  },
];

import { VerticalStackBarChart } from "@michi-vz/react";

<VerticalStackBarChart
  dataSet={data}
  width={640}
  height={320}
/>;

• missingDataMarker draws a thin stub on the zero line for explicitly null segments, so "no data" never reads as "zero".
• minBarHeight keeps thin non-zero segments visible at small scales.
• layout: "horizontal" flips the whole chart on its side.

Full props on the vertical stack bar API page.

The ribbon chart

A row of stacked bars shows each period; what it hides is the journey between them. The ribbon chart connects the same segment across adjacent columns with a trapezoid, so your eye can follow one category as it grows, shrinks, or swaps rank with a neighbour. Watch streaming eat the music industry:

One row per date whose keys stack into a column; same-key segments link across adjacent dates:

const data = [
  { date: 2016, Streaming: 30, Downloads: 45, Physical: 25 },
  // ...one row per period...
  { date: 2024, Streaming: 85, Downloads: 8, Physical: 7 },
];
const keys = ["Streaming", "Downloads", "Physical"];

import { RibbonChart } from "@michi-vz/react";

<RibbonChart
  series={data}
  keys={keys}
  width={640}
  height={320}
/>;

• columnWidth sets the width of each stacked column; the ribbons fill the space between.
• progressiveDraw reveals the chart left to right, which suits this chart's narrative reading unusually well.

Full props on the ribbon chart API page.

Next in the series: pie, donut and treemap.