Getting started

@michi-vz is a framework-agnostic chart library: a plain-TS engine (@michi-vz/core), native web components (@michi-vz/wc), and thin React / Vue / Svelte / Angular wrappers. Every chart renders in SVG or canvas (plus an experimental WebGPU path) and emits an LLM-ready ChartContext.

Install

Pick the package for your stack - full details, peer dependencies, and the CDN option are in Installation:

npm i @michi-vz/react
# or @michi-vz/vue  ·  @michi-vz/svelte  ·  @michi-vz/angular  ·  @michi-vz/wc  ·  @michi-vz/core

Render a chart

React

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

export default () => (
  <LineChart
    dataSet={[{ label: "North", series: [{ date: 2016, value: 10, certainty: true }] }]}
    xAxisDataType="date_annual"
  />
);

Web component / no build

<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"></michi-vz-line-chart>
<script>
  document.getElementById("c").dataSet = [
    { label: "North", series: [{ date: 2016, value: 10, certainty: true }] },
  ];
</script>

Imperative engine

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

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

The colour contract (light DOM)

Charts render into light DOM so consumer CSS reaches every mark - including canvas pixels, via a getComputedStyle probe. Colour marks by their sanitized label:

.line[data-label-safe="North"] { stroke: #b23a2e; }
.bar[data-label-safe="Africa"] { fill: #cda14a; }

@michi-vz/core/styles.css only handles layout/tooltip - it never sets fill/stroke, because colour is your contract.

Where to go next

• Pick a chart in the gallery - every chart page has a live demo, framework tabs, and a link to its full prop reference.
• Wondering if this library is for you? Why michi-vz - what is genuinely different, and where we are honest about limits.
• Debug what you build with the DevTools panel - sizing, scales, state diffs, and an accessibility audit for any chart on the page.
• Make charts predict and explain themselves with Insights - forecasts, anomalies, narration, all in the browser with the methodology spelled out.
• Wire charts to an AI assistant via the LLM context and MCP.