@chartmuse/charts

Intelligent chart rendering for the browser, Node, and the edge — bit-identical to the chartmuse-render HTTP service, but embedded directly via WebAssembly. No network round-trip, no server required.

npm install @chartmuse/charts

import init, { render_chart, render_chart_png } from "@chartmuse/charts";

await init(); // loads the .wasm bundle once, cached forever

const result = render_chart(JSON.stringify({
  chart_type: "sankey",
  data: {
    kind: "sankey_graph",
    nodes: [
      { id: "rev", label: "Revenue" },
      { id: "cogs", label: "COGS" },
      { id: "gp", label: "Gross Profit" },
    ],
    links: [
      { source: "rev", target: "cogs", value: 450000 },
      { source: "rev", target: "gp", value: 550000 },
    ],
  },
  options: { width: 1200, height: 600 },
}));

document.querySelector("#chart").innerHTML = result.svg;
console.log(result.warnings); // string[] — fields accepted but not yet honored

What it does

• Auto-detects the best chart type from a columnar data shape
• Renders 23 chart types: bar, line, scatter, sankey, histogram, pie/donut, heatmap, area, bubble, stacked bar, waterfall, treemap, boxplot, radar, funnel, gantt, polar bar, gauge, calendar heatmap, slope, and more
• Exports to SVG (always) or PNG (Uint8Array, ~5 ms)
• Same wire format as the chartmuse-render HTTP service — apps can swap between local WASM and remote HTTP without touching the payload

API

render_chart(spec_json: string) → SvgResult

Render to SVG.

interface SvgResult {
  svg: string;          // raw SVG XML
  warnings: string[];   // fields accepted but not yet honored in v0.1
}

render_chart_png(spec_json: string) → PngResult

Render to PNG bytes.

interface PngResult {
  png: Uint8Array;      // PNG image bytes
  warnings: string[];
}

version() → string

The crate version.

ChartSpec shape

The full spec is documented in crates/render/README.md. Two data shapes:

• { kind: "columnar", columns, rows } — works with all chart types and auto-detection
• { kind: "sankey_graph", nodes, links } — authored Sankey for SFS-style apps

Top-level options: chart_type (override auto-detection), options.{width, height, format, scale, background, font_family, font_size, title, subtitle, value_format, palette}.

Honored vs warned fields

| Field | Status | |---|---| | width, height, format, scale, background, font_family, font_size | ✅ honored | | options.title, options.subtitle, options.value_format | ✅ honored | | node.color (Sankey per-node color, hex string) | ✅ honored | | data-node-id attribute on Sankey rect elements (keyed by node label) | ✅ emitted — lets downstream code attach drag handlers / event listeners to specific nodes | | node.layer, node.order | ⚠️ accepted, warned | | link.color, link.opacity per-link | ⚠️ accepted, warned | | options.palette | ⚠️ accepted, warned |

All warnings flow through the warnings field on the result so callers can surface them to users without parsing.

Bundle size

| Build | Size | |---|---| | Both render_chart (SVG) + render_chart_png (PNG) | ~2.3 MB | | (PNG path pulls in resvg + tiny-skia + font subsetting) | |

The bundle loads once and caches forever; SVG-only deployments may want to skip PNG via a --features build (planned for v0.2).

Build from source

./build-npm.sh web      # browsers
./build-npm.sh nodejs   # Node
./build-npm.sh bundler  # webpack/rollup/vite

Requires rustup, the wasm32-unknown-unknown target, and wasm-pack.

License

MIT OR Apache-2.0