michi-vz chart by chart: gauge, radar and radial tree

This is part 5 of 9 in a series touring all 22 michi-vz chart types, family by family. The series starts in Introducing @michi-vz. Part 4 covered scatter and bubble.

Fifth stop: the charts that abandoned the x axis entirely and wrapped themselves around a centre instead. 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 gauge

Progress toward a goal, utilization, completion: anything that is "how far along are we" reads instantly as a ring. The gauge draws one ring per item, outer to inner, each sweeping its share of a full circle over a background track. Hovering a ring activates it and the centre readout follows:

One entry per ring, outer to inner; a null value still renders its track, which is how you show "no data yet" without hiding the ring:

const data = [
  { label: "Saxophone course", value: 72 },
  { label: "Cycling distance", value: 58 },
  { label: "Clean planche", value: 45 },
];

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

<GaugeChart
  dataSet={data}
  width={360}
  height={360}
  roundedCaps
  defaultActive="outer"
/>;

• max sets the value of a full sweep, 100 by default, so percentages work with no setup.
• valueFormatter changes the centre readout; centerContent replaces it with your own markup.
• ringThickness, ringGap and trackColor cover most visual tuning before you reach for CSS.

Full props on the gauge API page.

The radar chart

Comparing a few options across the same criteria is where the radar chart earns its keep: each candidate becomes a polygon, and the spikes and dents are the review. Here is the rebuilt michi-vz scored against the legacy v1 it replaced, with the old version dimmed into the background:

The spoke labels plus one values array per candidate, in the same order as the axes:

const axes = ["Docs", "API design", "A11y", "Performance", "DX", "Theming"];
const data = [
  { label: "@michi-vz", values: [8, 9, 9, 8, 9, 7] },
  { label: "Legacy v1", values: [4, 6, 3, 6, 5, 4], dimmed: true },
];

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

<RadarChart
  series={data}
  axes={axes}
  maxValue={10}
  width={480}
  height={400}
/>;

• dimmed: true pushes a series into the background, ideal for a before/after or benchmark polygon.
• maxValue pins the outer ring so different charts stay comparable; rings sets the grid density.
• A values entry may be null for a criterion you cannot score.

Full props on the radar chart API page.

The radial tree

Hierarchies with a rough sense of size: a category tree, a portfolio, an org chart with weights. The radial tree lays leaves equidistant from the centre as a dendrogram, sizes circles at both group and leaf level, and adapts its label strategy as leaves multiply, abbreviating, rotating, and eventually hiding rather than overlapping:

A forest of nodes; groups carry children, leaves carry a value that drives circle size:

const data = [
  {
    label: "Front end",
    children: [
      { label: "React", value: 9 },
      { label: "TypeScript", value: 9 },
      // ...
    ],
  },
  // ...more groups...
];

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

<RadialTreeChart
  dataSet={data}
  width={520}
  height={480}
  centerLabel="Skills"
/>;

• centerLabel word-wraps a title inside the centre circle.
• radiusRange bounds the circle sizes at both group and leaf level.
• labelDensityThresholds sets the leaf counts at which labels start rotating and then hiding.

Full props on the radial tree API page.

Next in the series: gap and comparable bars.