Schema DataViz Library
A comprehensive collection of 35 interactive chart components built with Svelte and D3.js. Customizable themes, SVG export, and production-ready code.
Featured Charts
Bar Chart
Line Chart
Donut Chart
Browse by Category
Bars
Vertical, horizontal, grouped, stacked, diverging, and animated bar charts
Lines
Line, multi-line, slope, step, and bump ranking charts
Areas
Area, stacked area, streamgraph, difference, and horizon charts
Hierarchies
Treemap, sunburst, circle packing, dendrogram, icicle, and tree
Dots
Scatterplot, bubble, beeswarm, hexbin, and connected scatter
Radial
Pie, donut, radial bar, chord, arc diagram, and radar charts
Maps
World and US map placeholders (GeoJSON-ready)
Features
Customizable Themes
10 built-in color presets including Schema brand colors. Import/export custom palettes as JSON.
Interactive
Hover tooltips, highlights, and smooth transitions on all chart types.
SVG Export
One-click export to SVG or PNG. Copy to clipboard for design tools.
Responsive
ViewBox-based SVG ensures charts scale beautifully at any size.
Accessible
WCAG-compliant color checking and semantic markup.
Performant
Built with Svelte for minimal bundle size and optimal rendering.
Quick Start
Import a Chart
<script>
import { BarChart } from '$lib/charts/bars';
const data = [
{ label: 'A', value: 45 },
{ label: 'B', value: 72 },
{ label: 'C', value: 38 },
];
</script>
<BarChart {data} width={600} height={400} />Customize Colors
<script>
import { setPreset } from '$lib/stores/colorStore';
// Use a built-in preset
setPreset('d3-category10');
// Or import custom JSON
import { setPalette } from '$lib/stores/colorStore';
setPalette(customPalette);
</script>Export SVG
<script>
import ChartWrapper from '$lib/components/ChartWrapper.svelte';
import { LineChart } from '$lib/charts/lines';
</script>
<!-- Export button included automatically -->
<ChartWrapper title="My Chart" filename="export">
<LineChart {data} width={600} height={400} />
</ChartWrapper>