michi-vz: one charting engine that follows you across React, Vue, Svelte and Angular
D3 charts for React, Angular, Vue, Svelte & Web Components — SVG/Canvas/WebGPU & built-in devtools
At a glance
- What is it?
- A MIT charting monorepo with one plain-TS engine, twenty-two chart types and wrappers for five frameworks, plus light-DOM rules, an LLM-ready ChartContext and a built-in devtools panel.
- Who is it for?
- michi-vz fits frontend teams that want one MIT-licensed charting standard across React, Vue, Svelte, Angular or plain web components, with financial-grade chart types, accessibility tables and an LLM-ready data context built in. Skip it if you need charts outside the twenty-two-type catalog, a stable WebGPU renderer today, or the cat logo in your fork, which the trademark policy excludes.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 7 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 17, 2026, and from our analysis. They are not legal advice.
DEEP OPEN-SOURCE ANALYSIS
Charts that survive a stack change
Rewriting charts is the tax every frontend team pays when it changes framework, and michi-vz is built to abolish that tax. The project, by beany-vu, is a monorepo with one framework-agnostic rendering engine in plain TypeScript and thin wrappers for React 18 and newer, Vue 3, Svelte, Angular and native web components built on Lit with light DOM, so the same twenty-two chart types render identically regardless of what the team migrates to next.
It is also a successor with a track record: the original michi-vz was React-only, and this rebuild extracts those battle-tested charts into the shared engine while keeping the original behavior and visual style intact. Everything is published to npm under the @michi-vz scope, MIT licensed, fully typed, tree-shakeable, and styleable with ordinary CSS, and an opt-in AI insights layer, forecast, anomaly detection, narration and an experimental agent and MCP surface, is in progress as its own package.
Twenty-two charts, three renderers, financial inclinations
The chart catalog runs from the standards, line, area, scatter, stacked and comparable bars, pie and donut, radar, treemap, sankey and bubble, into purpose-built financial views: a tornado dual horizontal bar, range and gap charts, ribbon charts, and a built-in notion of certain versus estimated values so forecasts and actuals read differently at a glance. There is also a Fountain chart, named for the Jet d'Eau and flagged experimental, and a choropleth and symbol map pair.
Every chart renders from the core engine, through the web component, and from all four framework wrappers, in SVG, canvas, or an experimental WebGPU renderer, with the same output across them. Interactive tooltips and highlighting are default behavior, and the README positions the financial views for analysts and client-facing reporting, where certain-versus-estimated distinction is the difference between a chart and an argument.
Installing and the first chart
Each package installs from npm by stack, and the README's install block covers the common cases:
npm i @michi-vz/core
npm i @michi-vz/wc
npm i @michi-vz/reactThe web-component route needs no build step at all. A script tag pulls the bundle from a CDN, a custom element takes width, height and a chart title as attributes, data is assigned as a property, and the chart emits events and an LLM-ready context:
<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>The React wrapper is one import and one component with props such as the data set, the axis data type, gap detection and the renderer choice, and the imperative engine path exposes mount, update, getContext and destroy for framework-less use.
The AI story: a context, and docs for the model
Two features aim squarely at the current AI-assisted workflow. First, every chart emits a ChartContext, a renderer-agnostic bundle of structured data, statistics, a rule-based natural-language summary and a hidden accessibility table mirror, identical whether the chart drew itself as SVG or canvas, designed to be dropped into a report, dashboard or AI feature. Second, the whole library ships as machine-readable documentation following the llms.txt convention, a compact index and a full reference regenerated on every docs build, with pointers a coding agent can consume directly.
The opt-in insights package extends this from context to analysis, adding forecast, anomaly and narration capabilities behind its own package boundary. The docs panel package completes the developer loop: an in-page devtools panel that can inspect, diff, profile and audit any chart on the page, which is the tool you want the week a finance team says the tornado chart looks wrong.
Hard rules: light DOM and a color contract
The README's technical rules section is short and strict. Charts render into light DOM only, no shadow-DOM style isolation, so consumer CSS reaches the chart. The canvas renderer resolves mark colors by reading consumer styles through computed-style probes, meaning a rule as ordinary as a stroke declaration on a labeled line reaches canvas pixels. Every mark carries data attributes for label and a sanitized variant, produced by a single sanitizing function, and the core stylesheet only handles layout and tooltips, never setting fill or stroke.
That contract is what makes the framework wrappers honest: the same CSS customizations work on the same marks regardless of renderer or framework. It also explains the project's confidence in stack migration, since the charts' appearance is defined by the consumer's own stylesheet conventions rather than by per-wrapper theming layers.
Development, licence and the brand boundary
The monorepo runs on pnpm workspaces with Turborepo, Changesets and tsup, with typecheck, tests and a headless-browser self-test that prints a passed-checks count. Documentation apps run via Docker. Code is MIT licensed, and the README draws one careful boundary: the michi-vz name, the shield logo and the cat artwork are not part of the MIT grant, governed by a trademark policy that requires redistributed forks to rebrand, while fixes and features remain freely portable.
Project state: three releases, the last push on 2026-09-11, and an in-progress insights layer flagged as experimental in its own package rather than oversold in the core. For teams evaluating charting libraries, the combination of per-framework packages, a shared engine, and an explicit brand policy is a coherent position: adopt the charts freely, respect the identity, and migrate stacks without a charting rewrite.
Against per-framework chart forks and heavyweight suites
The alternatives are familiar. Big charting suites cover every framework but carry their own rendering philosophies, licensing tiers and bundle weight; per-framework chart libraries fit one stack well and die at the migration boundary; hand-rolled SVG gives total control and ages poorly. michi-vz's bet is that the engine belongs in plain TypeScript with frameworks as thin adapters, and that light-DOM rendering plus a CSS contract is what makes the adapters thin without forking behavior.
The trade-offs are the usual ones: a twenty-two-chart fixed catalog rather than arbitrary composability, an experimental WebGPU renderer, and an AI insights layer still marked in progress. For an organization running mixed frameworks across teams, or a product about to migrate stacks, one charting standard with a shared engine and a devtools panel is a concrete operational win, and the MIT code plus the trademarked identity split keeps both the freedom and the brand honest.
Editorial conclusion
michi-vz fits frontend teams that want one MIT-licensed charting standard across React, Vue, Svelte, Angular or plain web components, with financial-grade chart types, accessibility tables and an LLM-ready data context built in. Skip it if you need charts outside the twenty-two-type catalog, a stable WebGPU renderer today, or the cat logo in your fork, which the trademark policy excludes. Verify the migration promise in an afternoon: install core and two wrappers, render the same data set in both, and diff the ChartContext output, because identical context across frameworks is the claim the whole engine stands on.
Frequently asked questions
Which frameworks does michi-vz support?
React 18 and newer, Vue 3, Svelte, Angular, native web components built on Lit, and plain JavaScript through the core engine. Every package renders the same twenty-two chart types from the same engine.
How do I install michi-vz?
Install from npm by stack: @michi-vz/core for the framework-agnostic engine, @michi-vz/wc for web components, or the dedicated @michi-vz/react, /vue, /svelte and /angular wrappers, with @michi-vz/devtools as a development dependency.
Does michi-vz work with AI assistants?
Yes, two ways: the library publishes llms.txt and llms-full.txt machine-readable docs regenerated on every build, and every chart emits a ChartContext with structured data, statistics and a natural-language summary designed for AI features. An experimental insights package adds forecast, anomaly and narration.
Community notes