RuneCharts 📊✨

A modern, performant, and developer-friendly charting library for Svelte 5. RuneCharts is built from the ground up to leverage the power of Svelte Runes and the flexibility of D3.js, offering a native, code-first solution for building beautiful and interactive data visualizations.

This project is for developers who want to break free from the "glass ceiling" of traditional BI tools and embed deeply customized, high-performance data experiences directly into their web applications.

Key Features

• Svelte 5 Runes First: Built on the new reactivity model for fine-grained, predictable, and blazing-fast updates.
• D3-Powered Core: Uses D3.js for its powerful scales, shapes, and mathematical precision, while Svelte handles the DOM.
• Fully Responsive & Interactive: Components are designed to be responsive out-of-the-box and come with built-in interactivity like tooltips and transitions.
• TypeScript Native: Written entirely in TypeScript for a robust, type-safe developer experience.
• Component-First Architecture: Composable and extensible by design. Low-level primitives like Axis and Tooltip can be used to build any custom chart.

Technology Stack

• Framework: Svelte 5 (Runes Mode)
• Visualization Primitives: D3.js
• Language: TypeScript
• Development Environment: Storybook
• Build Tool: Vite

Getting Started

To explore the components locally, clone the repository and start the Storybook development server.

# Clone the repository
git clone https://github.com/your-username/runecharts.git
cd runecharts

# Install dependencies
npm install

# Launch Storybook
npm run storybook

This will open the Storybook interface in your browser, where you can view all components, interact with their props, and see them in action.

Philosophy

The web has evolved beyond static dashboards embedded in iframes. Modern applications demand data visualizations that are as integrated, interactive, and performant as any other part of the UI. RuneCharts is built on this belief—that by providing developers with a set of well-crafted, unopinionated primitives, we can empower them to tell data stories without limits.

Current Components

• Bar Chart: Responsive, animated, with axes and interactive tooltips.
• Line Chart
• Scatter Plot
• ...and more to come!