Data Visualization (MDX)
Documentation doesn’t have to be walls of text. By combining Starlight with Solid.js and ECharts, you can embed fully interactive visualizations that readers can hover, zoom, and explore.
Growth over time
Section titled “Growth over time”This line chart tracks monthly downloads and GitHub stars for a hypothetical library. Hover over the chart to see exact values at each data point.
The chart is a Solid.js component hydrated on the client with client:visible — it loads no JavaScript until the user scrolls it into view.
Framework comparison
Section titled “Framework comparison”A grouped bar chart comparing developer satisfaction and interest across frontend frameworks.
How this works
Section titled “How this works”This page is an .mdx file with component imports. The charts are Astro wrappers that hydrate Solid.js components on the client. The charts use:
- ECharts for the rendering engine (canvas-based, performant with large datasets)
- Solid.js for reactive state and fine-grained DOM updates
- Astro’s island architecture to keep the rest of the page static HTML with zero JS overhead
The same ECharts component library can render line charts, bar charts, area charts, donut charts, sparklines, and more — all interactive, all progressively hydrated.