Astro

The npm package @casoon/chartlet renders charts while Astro builds the site and ships no JavaScript to the browser. It carries the renderer as a WebAssembly build, so the package is all you install:

npm install @casoon/chartlet

To render with an installed chartlet CLI instead, set CHARTLET_BIN to its path or pass binary to the component. Both produce the same bytes.

The component

---
import Chart from '@casoon/chartlet/astro';
import revenue from '../data/monthly-revenue.json';
---

<Chart id="monthly-revenue" spec={revenue} />

• id must be stable and unique within the page. It prevents accessibility ID collisions when the same specification is embedded more than once.
• format="svg" renders the graphic alone; format="html" (the default) renders the figure with caption, source and data table; the caption is the visible title, the graphic draws none.
• On a page with several charts, pass styles="external" and import @casoon/chartlet/chartlet.css once in the layout; each chart then carries only its own declared colors instead of the whole stylesheet. See Shared stylesheet.
• hooks adds the data-* hooks for the optional crosshair, series toggle, scroll stations and playback of @casoon/chartlet/interactive; see Optional JavaScript.
• The HTML table uses a native disclosure by default; set table="visible" to show it permanently.
• A specification with mobile needs nothing extra: the component passes the HTML through, and the figure switches to the mobile variant by the width of its container. See Responsive charts.

The render API

When a page needs the output as a string – for example to show build-time warnings next to the chart – call renderChart directly:

import { renderChart } from '@casoon/chartlet';

const { content, warnings } = renderChart(spec, {
  format: 'html',
  table: 'details',
  idPrefix: 'revenue',
});

content is the SVG or HTML; warnings lists the layout warnings, in the same lines the CLI writes. An invalid specification throws an error with the CLI’s message. With format: 'svg' and variant: 'mobile' it returns the mobile variant alone. This site uses exactly that to render its showcase.

Outside Astro, and in runtimes that cannot read files, see JavaScript runtimes.