Documentation
@chartts/coreAstro
Use Chart.ts with Astro. Zero JS by default with SVG rendering. Use framework islands for interactivity.
Installation
npm install @chartts/core
Zero JS charts in .astro files
---
import { line } from '@chartts/core'
const data = await fetch('/api/metrics').then(r => r.json())
const svg = line({ data, x: 'month', y: 'revenue', width: 600, height: 300 })
---
<div class="chart" set:html={svg} />
Charts render at build time. Zero JavaScript shipped to the client. Perfect for content sites, blogs, and documentation.Interactive charts with islands
Need interactivity (tooltips, zoom, click events)? Use Chart.ts React/Vue/Svelte components as Astro islands:
---
import { LineChart } from '@chartts/react'
---
<LineChart client:load data={data} x="month" y="revenue" />
The chart hydrates on page load. Use client:visible to hydrate when scrolled into view.Content Collections
Generate charts from Content Collections data. Fetch frontmatter values and render charts in .astro layouts. Great for data-driven blog posts and documentation.
Static site generation
Chart.ts SVG output works perfectly with Astro's static site generation. Charts are embedded as HTML in the build output. No runtime rendering needed.