---
url: https://chartbuddy.io/embed/docs/concepts/canvas.md
---
# 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):**

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

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

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

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

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

```css
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:**

```css
#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](/connect-ai/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.