Canvas & sizing

Chartbuddy fills its target element. The contract: you own a measured rectangle; we draw into it. Size the host so getBoundingClientRect() has a real width and height before new Insight().

Recipes

Fixed (slides / PNG exports):

<div id="chart" style="width:800px;height:450px"></div>

Typical slide-friendly sizes: ~800×450–600.

Fluid width + stable aspect (cards, decks, dashboards):

.chart-host {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
}

Full-page fill (only when the height chain is complete):

html, body { margin: 0; height: 100%; }
#chart { width: 100%; height: 100%; }

Every ancestor between html and #chart must also resolve height. Prefer aspect-ratio or fixed px when that chain is unclear.

AI artifact hosts (Claude, ChatGPT, …)

Sandboxed inline artifacts measure the mount box at render time. A host with only min-height and no resolved height often produces a squashed chart — Insight has nothing definite to size against.

Prefer explicit height in artifacts:

#chart { width: 100%; height: 420px; }

On normal pages, aspect-ratio + min-height is usually fine. In artifact sandboxes, fixed height is the safest default. See Connect Claude.

Anti-patterns

• height: 100% (or flex “fill the rest”) when parents lack an explicit height — common in Reveal, Zoom, and CSS-transformed slide shells
• Mounting while the host is display: none or on a hidden slide with no layout box — wait until the host is visible, then mount (or remount / update after layout)
• Measuring inside transformed parents without remasuring after the slide enters view

Slide decks (Reveal and similar)

1. Give the chart a fixed slot: aspect-ratio or fixed height — not % height inside the slide transform.
2. Mount when the slide is shown (slidechanged / equivalent), after the host has layout.
3. If the slot size changes, call a partial insight.update({}) or remount so the chart remeasures.

Background

Host CSS can wash out transparent charts. Set an explicit chart or page background when the surrounding page is light or unknown.

Export bounds

downloadPng() / toPngBase64() export the drawable chart for the current host size. Match container size to the slide slot you care about before exporting.