mochartAnimated interactive SVG charts

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

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

No framework required

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

Validated configuration

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

Accessible by default

The keyboard drives the same tooltip, legend filtering, and pie slices as the mouse, screen readers hear roles, labels, and live value announcements, and reduced motion is honored — tune or localize it all in one config section.

See the keyboard map

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 ↗

import { createDefaultChart } from '@mochart/core';

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

Head to Getting started for the full example, and use Open in demo under any chart on this site to keep editing it in the gallery.

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

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.