Accessible charts for Astro and EmDash

Two packages bring Enarratio to Astro sites and to EmDash, the CMS built on Astro. A chart arrives in the page as HTML and SVG, drawn on the server: complete before any script runs, with a written description and a data table for screen readers, numbers that search engines and language models can read, and light and dark themes. It draws bar, line, stacked area, scatter (with an optional regression line) and heatmap charts, and can add hover details, keyboard navigation and filtering where a page asks for them.

• enarratio-astro: a <Chart> component and chart blocks in Markdown, for Astro 6 or later.
• enarratio-emdash: a Chart block for EmDash 1.0 or later. An editor types /chart, pastes data from a spreadsheet, and describes what the chart shows.

Both are MIT licensed. The code is at github.com/DrDustinEdwards/astro.

In an Astro page

npm install enarratio-astro

---
import Chart from "enarratio-astro/Chart.astro";
import downloads from "../data/downloads.json";
---
<Chart
  type="line"
  data={downloads}
  x="year"
  y="downloads"
  series="package"
  alt="Downloads per year, 2024 to 2026: both packages grow every year."
  interactive
/>

The data can be rows (from code, JSON or a content collection) or CSV text. The chart's CSS is written once per page.

In Markdown

A code block whose language is chart becomes a chart: options, a line of three dashes, then the data. This block:

```chart
type: bar
x: team
y: tickets
series: status
layout: grouped
title: Tickets by team
alt: Support has the most open tickets; Platform has closed the most.
---
team,status,tickets
Support,Open,14
Support,Closed,22
Platform,Open,5
Platform,Closed,31
Web,Open,8
Web,Closed,17
```

draws this chart:

Register the plugin with Astro's Markdown processor, Sätteri (Astro 7) or remark (Astro 6):

// astro.config.mjs
import { satteri } from "@astrojs/markdown-satteri";
import { satteriCharts } from "enarratio-astro/markdown";

export default defineConfig({
  markdown: { processor: satteri({ mdastPlugins: [satteriCharts()] }) },
});

In EmDash

npm install enarratio-emdash

// astro.config.mjs
import emdash from "emdash/astro";
import { enarratioPlugin } from "enarratio-emdash";

export default defineConfig({
  integrations: [emdash({ plugins: [enarratioPlugin()] })],
});

The editor gains a Chart block. It is a native EmDash plugin, installed from npm: EmDash's plugin registry holds only sandboxed plugins, which cannot draw on public pages. The plugin declares no capabilities, makes no network requests and stores nothing.

Styles

Charts use Enarratio's default theme, in light and dark, unless a site picks styles: "base" (layout only, colors from the site's own design tokens) or "none". The gallery shows every chart Enarratio draws.