Visual QA for AI

You cannot judge ChartBuddy charts from chartData alone.

Loop

1. Generate HTML with new Insight(..., { instanceId, chartData })
2. Open in a real browser
3. Wait for ready (or insight.on('ready', …))
4. Observe via return values (preferred):

const insight = window.__CHARTBUDDY_INSIGHTS__['revenue'];
const cd = insight.getChartData();
// Default underlay is #ffffff; pass any CSS color for dark decks, etc.
const png = await insight.toPngBase64({ background: '#ffffff' });

5. Fix config (orientation, subtitle, ticks, container height) with a partial update:

insight.setData([['', 'Q1'], ['Revenue', 120]]);
insight.update({ subtitle: { visible: false, text: '' } });

6. Write PNG / JSON into the workspace yourself — do not rely on downloadPng() Save dialogs

chartData.backgroundColor does not bake into PNGs. Use the background export option.

Unknown chartType values throw at the API boundary — treat that as a signal to self-correct, not as a blank chart to debug.

Probe

insight.chart.cd.chartType
insight.chart.cd.orientation
insight.chart.cd.axes
insight.getChartData()
insight.isDirty()

For horizontal bars, confirm domain is on the left and primary range on the bottom.

Fixture hygiene

• Unique stable instanceId per mount (duplicates throw)
• persist: false
• Reset stale localStorage if a page still looks wrong