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.