DevTools · Prêt pour l'IA · Open source

Des graphiques que vous prendrez plaisir à déboguer.

Un moteur de graphiques agnostique de framework, avec des DevTools de premier ordre, un ChartContext lisible par l'IA sur chaque graphique, et une seule API TypeScript pour SVG, Canvas et WebGPU - pour React, Vue, Svelte, Angular ou les web components natifs.

Prise en main

Découvrir les DevTools

SVG · canvas · WebGPUgetContext() on every charttree-shakeable

Tout inspecter

Un vrai panneau DevTools : état en direct, mise en page, rendu et détection de survol, comparaison entre rendus, profilage et audits d'accessibilité.

Des graphiques que les machines lisent

Chaque graphique fournit un ChartContext structuré - un résumé en langage clair qu'un agent IA peut lire et piloter via MCP.

Accessible par défaut

Ce même contexte est une véritable alternative textuelle pour les lecteurs d'écran. Intégré, pas ajouté après coup.

Fonctionne en local, à vous de le garder

Prévision, détection d'anomalies et narration s'exécutent dans le navigateur. Aucun serveur, aucun envoi. Sous licence MIT.

✦

Same engine, secretly a cat

Every block below is a real michi-vz chart (a line, a scatter, a radar, an area), fed data until it turned into Michi, our cat in Geneva. The serious reasons start right below.

Meo meo, in outlineEars up, whiskers out, traced by one line series.

Purr, dot by dotEvery point is real chart data. The eyes and nose are gold.

Mrrp, spoke by spokeTwelve axes, one polygon, two very pointed ears.

Zzz, curled upAn area chart, loafing.

✦

Why michi-vz

Seventeen chart types, from stacked bars to gap charts to the fountain, drawn by one engine. Here are the six ideas michi-vz cares about most, each one a live chart, not a screenshot.

The sentence beside this chart was written by the chart itself. Every michi-vz chart emits a structured ChartContext that an AI agent can query, a screen reader can speak, and a test can assert on. Pixels for people, structure for everything else.

How machines read these charts →

The 2020 reading is missing. So the line is dashed into the gap and the 2020 tick carries its own explanation, from one prop: detectGaps. Charts should admit what they do not know instead of drawing a confident line through a hole.

Gap detection on the line chart →

The shaded fan is a real Holt-Winters forecast with 50% and 80% bands, computed in your browser the moment you opened this tab. No server, no upload: the data never leaves the page, and every method is a named technique you can check. The same layer searches your series by meaning, merges labels that arrive spelled differently, and takes your own local model when you want richer words.

The insights layer, with methodology →

Three contenders trade places year after year, and the ribbon chart keeps every path readable: follow one band and you follow one story. Hit Shuffle for a fresh season of numbers, as many times as you like.

The ribbon chart, in full →

This point cloud is painted by your GPU when the browser offers a WebGPU adapter, and falls back to canvas automatically when it does not. Flip the renderer below: same chart, same context, different painter. Honestly labeled experimental, and most dashboards never need it.

The 50,000-point demo on the scatter page →

The radar and the snippets below share one props object: React, Vue, Svelte, Angular, and plain web components are thin shells over the same TypeScript engine, kept in lockstep by a CI parity check. Learn the props once, use them in any stack, or in no framework at all.

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

export default () => <RadarChart {...props} />;

Install for your framework →

L'expérience développeur au cœur du projet

Écrivez moins.Comprenez plus.

Créez des graphiques en quelques minutes, inspectez-les en quelques secondes, et passez du prototype à la production avec une seule API. Choisissez un graphique selon la question que vous posez - chaque carte est un composant en direct sur des données réelles.

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

<michi-vz-line-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-fan-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-area-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-scatter-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-range-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-ribbon-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-radar-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-vertical-stack-bar-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-comparable-horizontal-bar-chart> · SVG · canvas · WebGPUView ›

Two full-bandwidth overlapping columns per category, with a change arrow above each pair - the vertical sibling of Comparable Bar.

<michi-vz-comparable-vertical-bar-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-dual-horizontal-bar-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-bar-bell-chart> · SVG · canvas · WebGPUView ›

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

<michi-vz-gap-chart> · SVG · canvas · WebGPUView ›

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 · canvas · WebGPUView ›

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

<michi-vz-pie-chart> · SVG · canvas · WebGPUView ›

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 · canvas · WebGPUView ›

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

<michi-vz-sankey-chart> · SVG · canvas · WebGPUView ›

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 · canvas · WebGPUView ›

A world/region choropleth: your own GeoJSON, shaded by a threshold colour scale or an explicit category map. 13 d3-geo/d3-geo-projection projections.

<michi-vz-choropleth-map-chart> · SVG · canvas · WebGPUView ›

A force-de-overlapped bubble map: you supply lng/lat per item, a one-shot simulation pulls overlapping circles apart. An optional muted backdrop landmass is available; dot-only by default.

<michi-vz-symbol-map-chart> · SVG · canvas · WebGPUView ›

A radial cluster()/dendrogram: leaves sit equidistant from the centre, with circles sized at both the group and leaf level. Labels adapt (abbreviate, rotate, or hide) as leaf density grows.

<michi-vz-radial-tree-chart> · SVG · canvas · WebGPUView ›

Des graphiques que vous prendrez plaisir à déboguer.

Tout inspecter

Des graphiques que les machines lisent

Accessible par défaut

Fonctionne en local, à vous de le garder

Same engine, secretly a cat

Why michi-vz

Écrivez moins.Comprenez plus.

Line

Fan

Area

Scatter

Range

Ribbon

Radar

Vertical Stack Bar

Comparable Bar

Comparable Vertical Bar

Dual Bar

Bar-Bell

Gap

Treemap

Pie / Donut

Bubble

Sankey

Fountain (Jet d'Eau)

Choropleth Map

Symbol Map

Radial Tree