Charts
Bar, line, area, pie, radar, bubble, sparkline, gauge, and treemap charts. SimpleChart and Sparkline/Gauge are zero-dependency SVG. The rest use Chart.js or d3-hierarchy.
Simple Chart (SVG, Zero Dependencies)
Built-in SVG chart with no external dependencies. Supports bar, line, and area types.
Bar
Simple SVG bar chart with category data.
| Category | Series 1 |
|---|---|
| Jan | 40 |
| Feb | 65 |
| Mar | 45 |
| Apr | 80 |
| May | 55 |
| Jun | 70 |
Line
Simple SVG line chart with trend data.
| Category | Series 1 |
|---|---|
| Jan | 40 |
| Feb | 65 |
| Mar | 45 |
| Apr | 80 |
| May | 55 |
| Jun | 70 |
Area
Simple SVG area chart showing magnitude.
| Category | Series 1 |
|---|---|
| Jan | 40 |
| Feb | 65 |
| Mar | 45 |
| Apr | 80 |
| May | 55 |
| Jun | 70 |
Bar Chart
Chart.js bar charts with tree-shaken imports. Vertical, grouped, and stacked variants.
Vertical Bars
Standard column chart for comparing categories.
Grouped Bars
Multi-series comparison across categories.
Stacked Bars
Part-to-whole composition across categories.
Horizontal Bars
Horizontal bar chart for ranking data.
Line Chart
Chart.js line charts for trends and comparisons.
Single Line
Revenue trend over time.
Multi-Line
Compare multiple series across the same timeline.
Area Chart
Filled line charts showing magnitude and trends.
Filled Area
User growth shown as filled area.
Pie Chart
Pie and doughnut charts for part-to-whole relationships.
Pie
Device type market share.
Doughnut
Task status distribution.
Radar Chart
Chart.js radar charts for multi-dimensional comparisons. Uses radial scales instead of Cartesian axes.
Skill Profile
Single-series radar showing team strengths.
Comparison
Two-series radar for head-to-head comparison.
Bubble Chart
Chart.js bubble charts for multi-variable analysis. Each point encodes x, y position and radius as a third variable.
Multi-Variable
Three dimensions encoded as position and size.
Sparkline
Lightweight inline micro-charts. Pure SVG, zero dependencies. Ideal for embedding in tables and dashboards.
Inline Sparklines
Line, bar, and area sparklines embedded in a table.
| Metric | Current | Trend |
|---|---|---|
| Revenue | 85 | |
| Orders | 78 | |
| Visitors | 97 |
Gauge
Single-value radial meters. Pure SVG, zero dependencies. 270-degree arc sweep with optional color segments.
Simple Gauge
Basic gauge with value and label.
Segmented Gauge
Color zones indicate performance ranges.
Mini Gauges
Compact gauges for dashboard rows.
Treemap
Nested rectangles showing hierarchical data proportions. Uses d3-hierarchy for layout. Click to zoom into nested categories.
Flat Treemap
Department budget allocation.
Nested with Zoom
Click a category to drill down. Use breadcrumbs to navigate back.