@opendata-ai/openchart-vue

@opendata-ai/openchart

Publication-quality data graphics from a JSON spec. You describe what the chart should communicate, and the engine handles scales, label placement, accessibility, and responsive layout. The result reads like a polished infographic, not a developer's debug output.

The spec is a plain JSON object that both humans and LLMs can author. The headless engine means the same spec renders in React, Vue, Svelte, or vanilla JS without code changes.

Because a chart is a JSON document, OpenChart works well as a render target for AI agents: the model writes the spec, validateSpec returns field-level errors it can fix, and updates animate in place. See Built for agents for a walkthrough, and Generating specs for the tool setup.

Interactive Examples · Built for agents

Quick start

npm install @opendata-ai/openchart-react

import { Chart } from "@opendata-ai/openchart-react";

const spec = {
  mark: "bar",
  data: [
    { language: "Python", popularity: 29 },
    { language: "JavaScript", popularity: 24 },
    { language: "TypeScript", popularity: 17 },
    { language: "Java", popularity: 14 },
    { language: "Go", popularity: 10 },
  ],
  encoding: {
    x: { field: "popularity", type: "quantitative" },
    y: { field: "language", type: "nominal" },
  },
  chrome: {
    title: "Python leads developer mindshare",
    subtitle: "2024 developer survey results",
    source: "Source: Stack Overflow",
  },
};

function App() {
  return (
    <div style={{ width: 600, height: 400 }}>
      <Chart spec={spec} />
    </div>
  );
}

That's the whole interface. encoding maps data fields to visual channels. chrome adds editorial framing. The engine figures out the rest.

The fixed-height wrapper is optional. Without one, the chart sizes itself: a 400px budget for the visualization (axes + plot), and titles, legends, and other chrome grow the figure on top of that. Give the wrapper an explicit height and set chromeLayout: 'subtract' when the chart must fit an exact slot; otherwise annotation notes can grow the figure.

Features

Tables are a first-class visualization type with heatmaps, sparklines, inline bars, and more.

Installation

Each package re-exports the types you need, so you typically only install one.

Release candidates publish under the next dist-tag, so a plain install always gets the latest stable. To try one: npm install @opendata-ai/openchart-react@next.

Documentation

Packages

@opendata-ai/openchart-core       Types, theme, colors, a11y, locale (no DOM)
@opendata-ai/openchart-engine     Headless compiler: spec in, layout out (no DOM)
@opendata-ai/openchart-vanilla    DOM rendering: SVG charts, maps, sankey, tilemaps,
                                  HTML tables, bar lists, canvas graphs (+ ./story, ./gif)
@opendata-ai/openchart-react      React wrappers with lifecycle management
@opendata-ai/openchart-vue        Vue 3 wrappers with lifecycle management
@opendata-ai/openchart-svelte     Svelte 5 wrappers with lifecycle management

Dependency direction: core <- engine <- vanilla <- react / vue / svelte. No lateral imports.

Claude Code skill

If you use Claude Code, the OpenChart skill gives Claude knowledge of the spec grammar, encoding rules, and design best practices so it can generate publication-quality specs from your data.

/plugin marketplace add tryopendata/skills
/plugin install openchart@openchart
/openchart

Or reference it in your Claude Code rules and prompts: Skill(openchart:openchart)

Part of the OpenData ecosystem

OpenChart is the visualization layer for OpenData, an open source platform for discovering, exploring, and visualizing public datasets. If you're looking for data to chart, that's a good place to start.

License

Apache 2.0