Introducing @michi-vz: charts that survive a stack change

Every chart library I have used makes the same quiet assumption: your team will never change its stack. Pick a React chart library and your charts are React charts forever. When the next project lands on Vue, or a client wants a widget with no framework at all, you rewrite the same bar chart for the third time.

I build data-heavy dashboards for a living, and I got tired of that rewrite. So on evenings and weekends I built the library I wanted to exist.

What @michi-vz is

@michi-vz is one plain TypeScript chart engine with 22 chart types, wrapped for React, Vue, Svelte, Angular, native web components and vanilla JS. Every wrapper renders the same charts from the same engine with the same props, so a stack change never means a charting rewrite. Under the hood you can pick SVG, Canvas or experimental WebGPU rendering behind one API. It is MIT licensed and published as 8 packages under the @michi-vz npm scope.

The 22 types cover the usual suspects (line, area, bar, scatter, pie, radar, treemap, sankey) plus some views I missed in other libraries: a fan chart for forecasts with confidence bands, a gap chart that draws missing data honestly, a tornado chart for comparisons, and choropleth and symbol maps.

Your first chart in two minutes

The fastest way to try it needs no build step at all. Drop the web component bundle in a page:

<script type="module" src="https://cdn.jsdelivr.net/npm/@michi-vz/wc/dist/michi-vz-wc.bundle.js"></script>
<michi-vz-line-chart id="c" width="600" height="300" chart-title="Sales"></michi-vz-line-chart>
<script>
  const c = document.getElementById("c");
  c.dataSet = [
    { label: "North", series: [{ date: 2016, value: 10, certainty: true }] },
  ];
</script>

On React it is a normal component:

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

<LineChart dataSet={data} xAxisDataType="date_annual" detectGaps renderer="svg" />;

And if you want no framework involvement at all, mount the engine directly:

import { mountLineChart } from "@michi-vz/core";

const chart = mountLineChart(el, { dataSet, width: 600, height: 300 });
chart.update(nextProps);
chart.destroy();

Same charts, same props, same behaviour in all three.

Charts that tell the truth

Dashboards mix actuals with estimates all the time, and most charts draw both with the same confident line. In michi-vz every data point carries a certainty flag, so forecasts and actuals read differently on screen. Turn on detectGaps and missing stretches are drawn as labeled gaps instead of being silently interpolated away.

Accessible by default

Every chart ships a hidden screen reader table that mirrors the data, and emits a plain-language summary of what the chart shows. You get that without writing a line of extra code, whether the chart renders as SVG or canvas.

Ready for AI features

Every chart also exposes getContext(), which returns an LLM-ready ChartContext: the structured data, computed stats and a plain-language summary, identical across renderers. If you are building a report generator or a chat feature that needs to talk about a chart, the context object is ready to paste into a prompt.

The docs ship in machine-readable form too, following the llms.txt convention: point a coding agent at llms.txt or the full reference in llms-full.txt and it can write michi-vz code without guessing.

Devtools included

@michi-vz/devtools adds an in-page panel to inspect any chart's state, diff its props, profile renders and run accessibility audits. No browser extension, it works in any framework and any browser.

Try it

Live demos and docs: michi-vz.netlify.app
Source: github.com/beany-vu/michi-vz-mono
Packages: npmjs.com/org/michi-vz

Install the wrapper for your stack and you are off:

npm i @michi-vz/react

Each wrapper depends on @michi-vz/core and pulls it in automatically, so one install is all you need. Reach for @michi-vz/core on its own only when you want the engine with no framework at all.

The series: chart by chart

This post is the start of a series touring all 22 chart types in nine family-sized stops: what each chart is for, a live example rendered right in the post, and the code in every framework.