Staged animation
Updates play as axis expansion → value change → axis contraction, so only one kind of change is in motion at a time — and stacked series animate as a single gapless unit.
How it works
Zero framework dependencies, staged animations, and bindings for Angular, Lit, React, Svelte, and Vue.
Updates play as axis expansion → value change → axis contraction, so only one kind of change is in motion at a time — and stacked series animate as a single gapless unit.
How it works
Charts are drawn with a retained-mode SVG renderer — no vdom, no framework runtime. First-class bindings wrap the same core for Angular, Lit, React, Svelte, and Vue.
Get started
Plain-object configs where everything is optional and defaulted, validated with human-readable error messages. The config reference is generated from the validators themselves.
Browse the reference
The keyboard drives the same tooltip, legend filtering, and pie slices as the mouse; screen readers hear roles, labels, and live value announcements; reduced motion is honored. Tune or localize it all in one config section.
See the keyboard map
Every chart on this site is live. This one stacks three series into one bar per month — hover a legend item to focus its series, click one to filter it out of the chart (click again to bring it back), and animate to a new dataset to watch the stack move as a single gapless unit:
import { createDefaultChart } from '@mochart/core';
const chart = createDefaultChart(container, { config, data, width, height });
chart.update({ data: nextData }); // animates to the new dataGetting started has the full example, and Open in demo under any chart on this site opens it in the gallery's editor.
The same core, wrapped idiomatically — each binding adds automatic container sizing and passes every chart prop through: Angular · Lit · React · Svelte · Vue
The Showcase is a mobile-first tour of the library's features: curated charts organized by feature, each with a seeded random data stepper, live config and data editors, share links, and image export.
Every binding has a full demo app — Vanilla TypeScript, Angular, Lit, React, Svelte, and Vue — where you can browse dozens of demo charts, edit their configs and data as JSON, share a link to your edited chart, and export charts as SVG/PNG.