Appearance
Helpers
js
import {
clearPersistedChart,
getInsights,
snapshotInsights,
version,
} from '@chartbuddy.io/embed';
clearPersistedChart(); // clear default persisted state
clearPersistedChart(id); // clear a specific instanceId
getInsights(); // { [instanceId]: Insight }
// Also mirrored at window.__CHARTBUDDY_INSIGHTS__
await snapshotInsights(); // config-only for all mounts
await snapshotInsights({ png: true }); // + pngBase64 (default white bg)
await snapshotInsights({ png: true, background: '#0f172a' });
console.log(version); // e.g. '1.7.50'Validation
js
import {
validateChartData,
assertValidChartData,
formatValidationIssues,
ChartDataValidationError,
} from '@chartbuddy.io/embed';
validateChartData(candidate); // → { valid, issues, errors, warnings }
validateChartData(cd, { form: 'resolved', requireSomething: false, maxIssues: 5 });
assertValidChartData(candidate, '[my-app]'); // throws ChartDataValidationError
formatValidationIssues(result.issues); // human-readable multi-line stringFull reference: Validation.
Framework bindings
js
import { InsightChart, useInsight } from '@chartbuddy.io/embed/react';
import { InsightChart, useInsight } from '@chartbuddy.io/embed/vue';
import '@chartbuddy.io/embed/element'; // <chartbuddy-insight> — Angular & anything elseGuides: React · Vue · Angular & web components.
On each Insight instance:
js
await insight.toPngBase64(); // default background #ffffff
await insight.toPngBase64({ background: '#0f172a' }); // custom opaque underlay
await insight.toPngBase64({ background: null }); // transparent
await insight.toPngBlob({ background: '#ffffff' });
insight.getChartData();
insight.setData(seriesData); // data-only refresh
insight.update(patch); // partial patch
insight.on('change', (cd) => { /* … */ });
insight.isDirty();
insight.downloadPng(); // human Save; transparent default
insight.downloadPng({ background: '#ffffff' }); // opaque human download