v0.4.0: 41 Zero-Dependency SVG Charts, 24 New Sections & 290+ Building Blocks

Charts, finally done right

astro-component-kit 0.4.0 is out, and this release is all about data visualization. We added 41 new charts and statistics components, so the Charts & Stats category now has 47 components. With 24 new sections on top, the library now has 290+ components and sections.

Every new chart is pure SVG, rendered at build time. That means:

• Zero dependencies. No Chart.js, no D3, no ApexCharts. The markup is computed by Astro and shipped as static HTML.
• Instant paint. The chart is already in the page when it loads, with no layout shift and no client bundle to download.
• Accessible by default. Each chart comes with a legend, keyboard-focusable marks with tooltips, and a “View data” table so screen-reader users get the real numbers.
• Themeable. Colors come from the --chart-1…8, --chart-pos and --chart-neg tokens in global.css, so a palette change in one place restyles every chart.

---

The 41 new charts

📈 Trends over time

• Line Chart — Multi-series lines with smooth, linear or step curves and optional area fill.
• Stacked Area Chart — Cumulative series to show how each part contributes to the total.
• Range Area Chart — Min/max bands around a central value.
• Forecast Line Chart — Actuals plus a dashed projection with a confidence band.
• Slope Chart — Before/after comparison between two points in time.
• Bump Chart — Ranking changes across periods.
• Sparkline Chart — Tiny inline trend for tables and KPI cards.
• Candlestick Chart — Open/high/low/close financial candles.

📊 Comparing values

• Grouped Bar Chart, Stacked Bar Chart and Horizontal Bar Chart for side-by-side and part-of-total comparisons.
• Diverging Bar Chart — Positive vs negative around a zero baseline.
• Waterfall Chart — How a starting value becomes a final one, step by step.
• Histogram Chart — Distribution of values in bins.
• Lollipop Chart and Dumbbell Chart — Lighter alternatives to bars, and gaps between two values.
• Bullet Chart — Actual vs target over qualitative ranges.
• Population Pyramid — Two mirrored distributions.

🥧 Parts of a whole

• Pie Chart (pie or donut), Waffle Chart and Segmented Bar Chart.
• Treemap Chart and Sunburst Chart for hierarchies.
• Funnel Chart — Conversion steps with drop-off rates.
• Radial Bar Chart and Polar Area Chart.

🔬 Distribution & relationships

• Scatter Plot with an optional regression line and R², plus Bubble Chart.
• Box Plot Chart — Median, quartiles and outliers.
• Heatmap Chart and Punch Card Chart — Intensity across two dimensions.
• Radar Chart — Multi-axis profile comparison.
• Sankey Chart — Flows between stages.

🎯 KPIs & progress

• KPI Stat Tile and KPI Trend Grid — Headline numbers with deltas and sparklines.
• Gauge Chart, Meter Gauge and Goal Progress Chart.
• Activity Rings — Concentric progress rings.
• Retention Cohort Table and Metric Delta Table — Data tables with built-in color scales and deltas.

All of them share a common Chart Frame for the title, legend, tooltip and data table, and each one supports glass, solid and ghost variants in sm, md and lg sizes.

---
import 'astro-component-kit/global.css';
import { LineChart, KpiStatTile } from 'astro-component-kit/charts';
---

<KpiStatTile label="Revenue" value="$48.2k" change={24} period="vs last month" />
<LineChart
  title="Monthly active users"
  categories={['Jan', 'Feb', 'Mar', 'Apr']}
  series={[{ name: 'Web', data: [120, 180, 160, 240] }]}
/>

---

24 new landing sections

The sections library grows to 41 full sections, several of them built on the new charts:

• Heroes: Minimal Centered, Terminal, Waitlist and Dashboard Preview.
• Features: Icon Grid, Alternating Rows, Tabs Showcase, How It Works and Integrations Grid.
• Pricing & social proof: Pricing Toggle Cards, Single Plan, Testimonial Carousel, Featured Testimonial and Logo Wall.
• Data: Stats Counter Band and Stats Dashboard.
• Conversion & content: Newsletter CTA, Split Image CTA, Careers, Two-Column FAQ, Contact with Map, Blog Grid, Changelog and Mega Footer.

---

Upgrade

npm install astro-component-kit@0.4.0

This is a non-breaking release: existing imports keep working, and the new components are available from astro-component-kit/charts, astro-component-kit/sections or the root entry point.

Browse everything on the Charts & Stats and Sections pages, and let us know on GitHub what you would like to see next.