Skip to content
The chart atlas · pick a chart by the question

michi-vzSeventeen charts. Every framework. One typed API.

Drop them in as web components, or import per-chart into React, Vue, Svelte, Angular, or plain TypeScript. Themed in your own CSS, and able to describe themselves in plain language.

17 charts5 outputsSVG or canvasgetContext() on every charttree-shakeableMIT
michi-vz crest

Chart atlas

Pick a chart by the question you are asking. Every card is a component on real data: hover to feel the interaction, click to open its full spec.

Trends over time across one or many series. The dashed run is a gap in the data (detectGaps).

<michi-vz-line-chart> · SVG/canvasView 

A forecast fan: history, a dashed forecast median, and nested confidence bands that widen with the horizon.

<michi-vz-fan-chart> · SVG/canvasView 

Part to whole over time: how each component's share of a stacked total shifts.

<michi-vz-area-chart> · SVG/canvasView 

The relationship between two numeric variables; bubble size encodes a third.

<michi-vz-scatter-chart> · SVG/canvasView 

Min to max bands per series: forecasts, confidence intervals, or observed ranges.

<michi-vz-range-chart> · SVG/canvasView 

Stacked columns per period, linked by ribbons that trace each category over time.

<michi-vz-ribbon-chart> · SVG/canvasView 

Compare several entities across a shared set of axes at a glance.

<michi-vz-radar-chart> · SVG/canvasView 

Stacked vertical bars per category, with an explicit missing-data guard.

<michi-vz-vertical-stack-bar-chart> · SVG/canvasView 

Two overlaid horizontal sub-bars per label: a based vs compared value.

<michi-vz-comparable-horizontal-bar-chart> · SVG/canvasView 

Diverging bars from a centre line: population pyramids and tornado charts.

<michi-vz-dual-horizontal-bar-chart> · SVG/canvasView 

Cumulative horizontal segments per row with end-cap circles at each step.

<michi-vz-bar-bell-chart> · SVG/canvasView 

Two values per label joined by a gap bar that emphasises the difference.

<michi-vz-gap-chart> · SVG/canvasView 

Hierarchical tiles sized by value; each splits into two parts (e.g. realized vs untapped). Falls back to a stack on narrow screens.

<michi-vz-treemap-chart> · SVG/canvasView 

Slices sized by share of a whole; set innerRadiusRatio for a donut. Per-slice % labels and an optional legend.

<michi-vz-pie-chart> · SVG/canvasView 

Circles sized by value, pulled into a cluster by gravity; each can split into a realized core inside a lighter untapped ring.

<michi-vz-bubble-chart> · SVG/canvasView 

Flows between nodes laid out in columns; each band's thickness is the flow value. Built on d3-sankey.

<michi-vz-sankey-chart> · SVG/canvasView 

A Jet d'Eau: apex height is the value, the blooming plume is the uncertainty. Categorical x = snapshot/comparison, temporal x = trend.

<michi-vz-fountain-chart> · SVG/canvasView 

Free and open source. MIT licensed.