Data & embeds

Charts Plugin

Insert and edit chart atoms in WYSIWYG, or run the full studio as on-codemerge/charts.

Install / CSS: Editor API.
Standalone app: Charts Editor · surfaces: Editors · diagrams: Mermaid.

Surfaces

import { Editor, ChartsPlugin } from 'on-codemerge';

new Editor(host, {
  plugins: [ChartsPlugin()], // surface: 'atom' (default)
});

// Standalone Charts app:
// ChartsPlugin({ surface: 'workspace', toolbar?: ChartToolbarOptions })

Option	Role
`surface: 'atom' \| 'workspace'`	Atom popup studio (default) vs shell workspace
`toolbar`	Workspace bar items; default `defaultChartToolbar()` (Export PNG)
`menu` / `group` / `order`	Atom Insert placement

createDefaultPlugins() from on-codemerge/charts = workspace + default export toolbar.

Demo (atom)

Studio

Shared mountChartWorkspace UI for atom popup and Charts editor:

Title — sticky above tabs
Type — chart type + templates
Data — series table (selected after type pick)
Settings — axes; mode (bar/area); legend/grid for scatter & bubble only (mermaid types ignore them)
Preview — live render; workspace Export PNG lives on the editor toolbar

Commands

editor.command('insertChart'); // Mod-Alt-g — opens studio (does not silent-insert)

Atom: edit / resize / PNG export / delete from the chart context menu. No separate updateChart / exportChart commands.

editor.on('docChanged', () => {});

HTML boundary

Persisted atoms use data-node="chart":

<div
  data-node="chart"
  data-chart-type="bar"
  data-data='[{"name":"Series 1","data":[{"label":"A","value":3}]}]'
  data-title="Sales"
  data-width="800"
  data-height="400"
  data-show-legend="true"
  data-show-grid="true"
  data-mode="default"
  data-orientation="vertical"
></div>

Attr	Notes
`data-chart-type`	`bar` \| `line` \| `area` \| `radar` \| `pie` \| `doughnut` \| `scatter` \| `bubble`
`data-data`	JSON series array
`data-mode`	`default` \| `grouped` \| `stacked` (bar/area drivers)
`data-orientation`	`vertical` \| `horizontal` when supported

Render

Types	Engine
bar, line, area, pie, doughnut, radar, …	`@codemerge/mermaid` subset via `toMermaidSource` → `render`
scatter, bubble	Canvas

Mermaid here is not full Mermaid.js — see Mermaid.

Bar / line / area y-axis runs from min(0, data) to max(0, data), so negative values are drawn below a zero baseline.

Data shape

type ChartSeries = {
  name: string;
  color?: string;
  data: Array<{ label: string; value: number; color?: string }>;
};

Scatter/bubble points use x / y / r instead of label / value (driver coerce).