# Embeddable Chart Builder

> Make a self-contained chart to embed anywhere: inline SVG, standalone HTML, accessible snippet. Paste a small table and get a chart you can host yourself: inline SVG markup, a <figure> snippet with an accessible data-table fallback, a standalone .svg file and a standalone .html file with no external scripts (optionally with a tiny inline script for tooltips and keyboard focus).

Part of usefulweb.site (https://usefulweb.site/). Results are deterministic calculations from the inputs and the listed assumptions; the API returns exactly what the web page shows.

## Use it
- Human interface: https://embeddablechartbuilder.usefulweb.site/ (interactive tool at https://embeddablechartbuilder.usefulweb.site/tool)
- JSON API: POST https://embeddablechartbuilder.usefulweb.site/api/v1/calculate with a JSON object of inputs (schema: https://embeddablechartbuilder.usefulweb.site/api/v1/tool)
- OpenAPI: https://embeddablechartbuilder.usefulweb.site/openapi.json
- MCP (Streamable HTTP): https://embeddablechartbuilder.usefulweb.site/mcp - tool `embeddable_chart_builder`

## Inputs
- data (textarea): Data - First row = headers. First column = labels (or dates/numbers for line and scatter charts); every further numeric column becomes a series.
- file (file): Or upload CSV/XLSX - Max 5 MB; the first sheet is used.
- chartType (select): Chart type
- title (text, required): Title
- description (textarea): Text alternative (description) - What the chart shows, for screen readers and as the image alt text. Empty: generated from the data.
- xLabel (text): X axis label
- yLabel (text): Y axis label
- sourceNote (text): Source / credit line - Shown under the chart, e.g. "Source: Eurostat, 2026".
- width (integer): Width - The SVG scales to its container; this sets the aspect ratio and text size.
- height (integer): Height
- interactive (boolean): Add hover/keyboard tooltips to the standalone HTML file
- png (boolean): Also create a PNG image

## Method
- The data is parsed like the CSV/Excel Chart Studio (delimiter, number formats and dates detected automatically) and drawn with the site’s deterministic SVG chart library: Okabe–Ito colours, dash patterns, a <title>/<desc> text alternative and role="img".
- The SVG is passed through a strict allow-list sanitiser, so the markup contains no scripts, event handlers, external links or style attributes and can be pasted into most CMSs.
- The <figure> snippet keeps the data accessible: the SVG is labelled by its title and description, the caption carries the source line, and a <details> element holds the full data table as a fallback for screen readers, text browsers and copy-paste.
- The standalone HTML file contains everything inline (a few lines of CSS; with the interactive option a ~1 KB vanilla script that makes data marks focusable and shows their values). It loads nothing from other servers.