Astro Charts (Alpha)

Reusable chart and data components for Astro sites — inspired by the Evidence style of storytelling with inline charts.

This library makes it easy to embed charts and tables directly inside Markdown/MDX pages with simple, declarative components.

✨ Features (Alpha)

• 📈 LineChart – trends over time
• 📊 BarChart – categorical comparisons
• 📋 DataTable – detailed data tables with sorting/filtering

These three are fully functional in the alpha release.

🧭 Roadmap

Additional components are in development and will be released in future versions:

• AreaChart
• ScatterChart
• Pie/DonutChart
• KpiCard (highlight key values)
• FacetGrid (small multiples)
• Stacked/Grouped BarChart
• Histogram
• BoxPlot / ViolinPlot
• Heatmap
• Treemap / Sunburst
• Map / Choropleth

🚀 Getting Started

Install

npm install @misnctrl/astro

Enable MDX

Add the MDX integration to your Astro project:

npm install @astrojs/mdx

astro.config.mjs:

import mdx from '@astrojs/mdx';

export default {
  integrations: [mdx()],
};

Usage in MDX

import { LineChart, BarChart, DataTable } from '@misnctrl/astro';

# Weekly Sessions

<LineChart
  data={{ kind: 'url', url: '/data/traffic.csv', format: 'csv' }}
  x="date"
  y="sessions"
  xType="temporal"
  yType="quantitative"
  tooltip
  grid
/>

<BarChart
  data={{ kind: 'static', rows: [
    { channel: 'Organic', sessions: 400 },
    { channel: 'Paid', sessions: 120 },
    { channel: 'Email', sessions: 80 }
  ]}}
  x="channel"
  y="sessions"
/>

<DataTable data={{ kind: 'url', url: '/data/users.csv', format: 'csv' }} />

📦 Data Sources

Components accept data in multiple forms:

• Static inline rows (JSON array)
• CSV or JSON URL (fetched at runtime)
• Inline CSV string (parsed in the browser)

⚡ Tech Stack

• Astro islands for interactivity
• React Vega for Vega-Lite powered charts
• d3-dsv for CSV parsing

📌 Status

⚠️ Alpha release – API is not stable, breaking changes possible.

Please try it out, file issues, and help shape the library!

📜 License

MIT — free to use and adapt.