# ChartBuddy Embed

> Embed ChartBuddy Insights in HTML via `new Insight()`. Pass `chartData`; no ChartBuddy account required. NOT Chart.js. Spreadsheet UI is not included.

Start here, then follow links. Do not load `llms-full.txt` by default.

Hard rules:
- Create with **new Insight()** (not createChart / renderChart / mountChart).
- Prefer the package root import: `import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed'`.
- Mount elements need a definite width and height (prefer aspect-ratio or fixed px).
- Use the correct option bag for the chart type (`bar` on a `pie` throws).
- Validate with `validateChartData(cd)` and branch on issue `code`, never message text.
- PNG underlay: `toPngBase64({ background })` — do not rely on `chartData.backgroundColor` alone.
- Before generating chartData, fetch [Quick start](https://chartbuddy.io/embed/docs/getting-started/quick-start.md) and [chartData schema](https://chartbuddy.io/embed/docs/api/chart-data.md); add the chart-type and axes `.md` pages you need.

## Must read

- [chart-schema.json](https://unpkg.com/@chartbuddy.io/embed/chart-schema.json): Machine-readable chartData contract
- [Package README](https://unpkg.com/@chartbuddy.io/embed/README.md): Human package overview + API surface
- [Quick start](https://chartbuddy.io/embed/docs/getting-started/quick-start.md): First Insight mount
- [chartData schema](https://chartbuddy.io/embed/docs/api/chart-data.md): Field reference, layouts, option bags
- [Validation](https://chartbuddy.io/embed/docs/quality-assurance/validation.md): validateChartData codes and repair loop
- [Docs index](https://chartbuddy.io/embed/docs/llms.txt): Same index shape for the hosted docs site

## Getting Started

- [Introduction](https://chartbuddy.io/embed/docs/getting-started.md): Product overview
- [Installation](https://chartbuddy.io/embed/docs/getting-started/installation.md): Package install and CDN imports
- [Quick start](https://chartbuddy.io/embed/docs/getting-started/quick-start.md): First Insight mount
- [View vs edit](https://chartbuddy.io/embed/docs/getting-started/view-vs-edit.md): Hover ball vs full editor
- [Single vs multi mounts](https://chartbuddy.io/embed/docs/getting-started/multi-mount.md): instanceId and dashboards

## Connect AI

- [Overview](https://chartbuddy.io/embed/docs/connect-ai.md): How agents should fetch docs
- [Cursor](https://chartbuddy.io/embed/docs/connect-ai/cursor.md): Cursor agent handoff
- [Claude](https://chartbuddy.io/embed/docs/connect-ai/claude.md): Claude HTML artifacts
- [Claude Code](https://chartbuddy.io/embed/docs/connect-ai/claude-code.md): Claude Code / desktop Code tab
- [OpenCode](https://chartbuddy.io/embed/docs/connect-ai/opencode.md): OpenCode agents
- [ChatGPT / Codex](https://chartbuddy.io/embed/docs/connect-ai/chatgpt-codex.md): Codex CLI / desktop

## Chart types

- [Overview](https://chartbuddy.io/embed/docs/chart-types.md): Type list and option bags
- [Clustered bar](https://chartbuddy.io/embed/docs/chart-types/clustered-bar.md): Side-by-side bars
- [Stacked bar](https://chartbuddy.io/embed/docs/chart-types/stacked-bar.md): Absolute and 100% stacks
- [Line](https://chartbuddy.io/embed/docs/chart-types/line.md): Lines, dual-axis, point markers
- [Stacked area](https://chartbuddy.io/embed/docs/chart-types/stacked-area.md): Filled stacks (`cd.area`)
- [Pie / donut](https://chartbuddy.io/embed/docs/chart-types/pie.md): Shares; `donut` seeds a hole
- [Scatter / bubble](https://chartbuddy.io/embed/docs/chart-types/scatter.md): Point rows; `bubble` seeds larger markers
- [Waterfall](https://chartbuddy.io/embed/docs/chart-types/waterfall.md): Bridge charts; do not invent totals
- [Marimekko](https://chartbuddy.io/embed/docs/chart-types/mekko.md): Variable-width 100% columns
- [Bar Mekko](https://chartbuddy.io/embed/docs/chart-types/bar-mekko.md): Variable width, absolute heights
- [Combo](https://chartbuddy.io/embed/docs/chart-types/combo.md): Mixed series types on one chart

## Axes

- [Overview](https://chartbuddy.io/embed/docs/axes.md): Roles, sides, orientation remap
- [Value axis](https://chartbuddy.io/embed/docs/axes/value-axis.md): Bounds, ticks, formats
- [Domain axis](https://chartbuddy.io/embed/docs/axes/domain.md): Categories or linear X
- [Titles & chrome](https://chartbuddy.io/embed/docs/axes/titles-and-chrome.md): Axis titles and styling
- [Secondary / dual axis](https://chartbuddy.io/embed/docs/axes/secondary.md): boundSeries and second scale
- [Axis breaks](https://chartbuddy.io/embed/docs/axes/breaks.md): Broken value axes
- [By chart type](https://chartbuddy.io/embed/docs/axes/by-chart-type.md): What each type uses

## API / schema

- [Insight API](https://chartbuddy.io/embed/docs/api.md): Mount, update, events, PNG helpers
- [chartData schema](https://chartbuddy.io/embed/docs/api/chart-data.md): Full field reference
- [Helpers](https://chartbuddy.io/embed/docs/api/helpers.md): getInsights, snapshotInsights
- [Validation](https://chartbuddy.io/embed/docs/quality-assurance/validation.md): validateChartData
- [Visual QA](https://chartbuddy.io/embed/docs/quality-assurance/visual-qa.md): Observe, PNG, fixtures

## Samples

- [Gallery](https://chartbuddy.io/embed/docs/samples.md): Live sample index
- [Clustered bar](https://chartbuddy.io/embed/docs/samples/clustered-bar.md): Copy-paste bar
- [Line](https://chartbuddy.io/embed/docs/samples/line.md): Copy-paste line
- [Dual-axis line](https://chartbuddy.io/embed/docs/samples/dual-axis-line.md): Secondary axis example
- [Combo](https://chartbuddy.io/embed/docs/samples/combo.md): Mixed series example
- [Dashboard](https://chartbuddy.io/embed/docs/samples/dashboard.md): Multi-mount example

## Optional

- [Full docs bundle](https://chartbuddy.io/embed/docs/llms-full.txt): Entire docs site in one file — skip unless you need a single blob
- [Concepts](https://chartbuddy.io/embed/docs/concepts.md): Mental model and defaults
- [Configuration](https://chartbuddy.io/embed/docs/configuration.md): Title, legend, arrows, formats
- [React](https://chartbuddy.io/embed/docs/guides/react.md): React binding
- [Vue](https://chartbuddy.io/embed/docs/guides/vue.md): Vue binding
- [Angular & web components](https://chartbuddy.io/embed/docs/guides/angular.md): Custom element