michi-vz chart by chart: pie, donut and treemap

This is part 3 of 9 in a series touring all 22 michi-vz chart types, family by family. The series starts in Introducing @michi-vz. Part 2 covered area, stack bar and ribbon.

Third stop: one moment in time, divided up. The pie for a handful of categories, the treemap for dozens. 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 pie and donut

The pie chart gets sneered at, but for one part-of-whole snapshot with a handful of slices, nothing communicates faster. Slices sort so the biggest reads first, percentages label themselves when there is room, and one prop turns the pie into a donut:

One entry per slice:

const data = [
  { label: "michi-vz", value: 45 },
  { label: "e-saxophone", value: 25 },
  { label: "This website", value: 15 },
  { label: "Everything else", value: 15 },
];

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

<PieChart
  dataSet={data}
  width={420}
  height={360}
  innerRadiusRatio={0.6}
  showLegend
/>;

• innerRadiusRatio: 0 is a full pie; anything in (0,1) is the donut hole as a fraction of the radius.
• sortByValue: false keeps your data order when the sequence itself means something.
• padAngle and cornerRadius give the modern segmented look without CSS.

Full props on the pie chart API page.

The treemap

When categories are many and the question is "where is the bulk", the treemap tiles the whole area by value. The michi-vz version adds a two-part split per tile: pass a partial value and each tile shows how much of its total is realized versus still untapped, a pattern that comes straight from trade-potential dashboards:

A forest of nodes; a flat list works, nodes with children nest, and partial drives the split:

const data = [
  { label: "Coffee", value: 80, partial: 55 },
  { label: "Tea", value: 45, partial: 28 },
  // ...or nested: { label: "Group", children: [...] }
];

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

<TreemapChart
  dataSet={data}
  width={640}
  height={360}
  showSplit
  showLegend
/>;

• layout: "auto" folds the treemap into a single-column stack below stackBreakpoint width, so it stays readable on phones.
• minTileShare floors tiny tiles to a share of the largest, keeping the long tail visible.
• tileValueLabels adds each tile's value and share as a second label line.

Full props on the treemap API page.

Next in the series: scatter and bubble.