Skip to content

mochartAnimated interactive SVG charts

Zero framework dependencies, staged animations, and bindings for Angular, Lit, React, Svelte, and Vue.

See it move

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:

Open in demo ↗
js
import { createDefaultChart } from '@mochart/core';

const chart = createDefaultChart(container, { config, data, width, height });
chart.update({ data: nextData }); // animates to the new data

Getting started has the full example, and Open in demo under any chart on this site opens it in the gallery's editor.

Bring your framework

The same core, wrapped idiomatically — each binding adds automatic container sizing and passes every chart prop through: Angular · Lit · React · Svelte · Vue

Explore the demo galleries

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.

Released under the MIT License.