First Insight

Create

import { Insight } from '@chartbuddy.io/embed';

const insight = new Insight('#chart', {
  instanceId: 'main', // stable id for agents + persist
  persist: false,
  chartData: { /* … */ },
});

await insight.ready;

target may be a CSS selector string or an HTMLElement.

Wait for ready

Always await insight.ready before measuring the SVG, calling downloadPng(), or reading getChartData(). You can also subscribe:

insight.on('ready', () => { /* … */ });

Update data

// Data only — keeps chart type and formatting
insight.setData([
  ['', 'Q1', 'Q2'],
  ['Revenue', 100, 120],
]);

// Any partial patch
insight.update({
  title: { visible: true, text: 'Updated' },
  subtitle: { visible: false, text: '' },
});

// Or setChartData — chartType is optional on partials
insight.setChartData({
  seriesData: [/* … */],
  title: { visible: true, text: 'Updated' },
});

Partial objects are merged over defaults (and over the current chart). Nested keys like title, axes, and legend are deep-merged. See Defaults & merging.

Invalid chartType / field types throw; see Insight API → Validation.

Read config

const cd = insight.getChartData();

Prefer this (or getChartData() / exportConfig()) when you need a full schema example.

Destroy

insight.destroy();

Removes the chart and chrome from the target. Call before replacing the DOM node.

Inspect in the console

After mount (when the host exposes it):

insight.chart.cd.chartType
insight.chart.cd.orientation
insight.mode // 'view' | 'edit'
insight.isDirty()