Графики
Столбчатые, линейные, площадные, круговые, радарные, пузырьковые, спарклайн, датчик и Treemap-диаграммы. SimpleChart и Sparkline/Gauge — чистый SVG без зависимостей.
Простой график (SVG, без зависимостей)
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 |
Столбчатая диаграмма
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.
Линейный график
Chart.js line charts for trends and comparisons.
Single Line
Revenue trend over time.
Multi-Line
Compare multiple series across the same timeline.
Диаграмма с областями
Filled line charts showing magnitude and trends.
Filled Area
User growth shown as filled area.
Круговая диаграмма
Pie and doughnut charts for part-to-whole relationships.
Pie
Device type market share.
Doughnut
Task status distribution.
Радарная диаграмма
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.
Пузырьковая диаграмма
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.
Спарклайн
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 |
Датчик
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.