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:

1. Title — sticky above tabs
2. Type — chart type + templates
3. Data — series table (selected after type pick)
4. Settings — axes; mode (bar/area); legend/grid for scatter & bubble only (mermaid types ignore them)
5. 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.

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).

See also

• Charts Editor
• Mermaid
• SDK — studioPaneTabs / syncStudioPanel