composable-svelte-charts
CommunityInteractive Svelte charts with Observable Plot.
Authorjonathanbelolo
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a modular, state-driven charting toolkit for building interactive data visualizations in Svelte using Observable Plot and D3.
Core Features & Use Cases
- Chart types: Scatter, Line, Bar, Area, Histogram
- Interactive features: Zoom, Brush, Tooltips, and responsive sizing
- State-driven architecture: Reducer-based data flows with typed actions for predictable updates
- Reusable Chart component: High-level Chart wrapper designed for dashboards and analytics
- Use cases: Real-time dashboards, exploratory data analysis, and presentation-ready visuals
Quick Start
Install the charts package and create a chart store to render a chart:
- Install: npm install @composable-svelte/charts @composable-svelte/core
- Create store: import { createStore } from '@composable-svelte/core'; import { Chart, chartReducer, createInitialChartState } from '@composable-svelte/charts'; const data = [{x:1,y:2}, {x:2,y:3}]; const chartStore = createStore({ initialState: createInitialChartState({ data }), reducer: chartReducer, dependencies: {} });
- Render: <Chart store={chartStore} type="scatter" x="x" y="y" />
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: composable-svelte-charts Download link: https://github.com/jonathanbelolo/composable-svelte/archive/main.zip#composable-svelte-charts Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.