UIPackage
Menu

Framework

VueReact

Change language

Boilerplate repo

Charts

66 charts · 8 families · Apache ECharts wrappers · themed with your tokens

▎Cartesian— 28 charts

area-chartcartesian
Filled-area line chart wrapper around Apache ECharts. Multi-series, stacked, gradient, and stepped variants. Theme-aware via registry tokens (--chart-1..5, --muted-foreground, --border).
bar-chartcartesian
Bar chart wrapper around Apache ECharts. Vertical, horizontal, grouped, stacked, and negative-value variants. Theme-aware via registry tokens.
bar-race-chartcartesian
Animated bar-race chart around Apache ECharts. Auto-advancing ranked frames with smooth resort transitions. Theme-aware via registry tokens.
bubble-chartcartesian
Bubble chart around Apache ECharts. XY scatter with a third dimension encoded in bubble area. Theme-aware via registry tokens.
candlestick-chartcartesian
OHLC candlestick wrapper around Apache ECharts. Bullish/bearish coloring from registry tokens, optional data-zoom slider, axis-cross pointer.
combo-chartcartesian
Combo bar + line chart with dual axes around Apache ECharts. Bars on the left axis, smooth lines on the right axis, shared legend. Theme-aware via registry tokens.
control-chartcartesian
Control (SPC) chart around Apache ECharts. Run line with auto-computed mean ± 2σ limits; out-of-spec points turn red. Theme-aware via registry tokens.
dumbbell-chartcartesian
Dumbbell chart around Apache ECharts custom series. Before/after dots joined per category for change comparison. Theme-aware via registry tokens.
effect-scatter-chartcartesian
Effect scatter chart with ripple animation around Apache ECharts. Highlights live points and alerts with a configurable ripple period. Theme-aware via registry tokens.
gantt-chartcartesian
Gantt chart around Apache ECharts custom series. Date-range bars on a time axis with per-task progress shading. Theme-aware via registry tokens.
heikin-ashi-chartcartesian
Heikin-Ashi chart around Apache ECharts. OHLC is averaged candle-over-candle in the wrapper so trends read as uninterrupted bull/bear runs. Theme-aware via registry tokens.
histogram-chartcartesian
Histogram wrapper around Apache ECharts. Auto-bins raw values or renders pre-binned counts with zero-gap bars and a highlighted peak. Theme-aware via registry tokens.
line-chartcartesian
Line chart wrapper around Apache ECharts. Smooth/stepped/dashed lines, multi-series, point markers. Theme-aware via registry tokens.
lollipop-chartcartesian
Lollipop chart around Apache ECharts. Thin stems with dot endpoints and value labels. Theme-aware via registry tokens.
marimekko-chartcartesian
Marimekko (mosaic) chart around Apache ECharts custom series. Column widths encode column totals, stacked segments encode within-column shares, with in-canvas labels. Theme-aware via registry tokens.
pareto-chartcartesian
Pareto chart around Apache ECharts. Sorted bars with an auto-computed cumulative % line on a dual axis. Theme-aware via registry tokens.
pictorial-bar-chartcartesian
Pictorial bar chart around Apache ECharts. Repeated symbols fill to the value with a configurable symbol shape. Theme-aware via registry tokens.
polar-bar-chartcartesian
Radial bar chart on the ECharts polar coordinate system. Categories around the radius axis with rounded caps. Theme-aware via registry tokens.
population-pyramid-chartcartesian
Population pyramid (mirrored bar) chart around Apache ECharts. Back-to-back horizontal bars with absolute-value labels. Theme-aware via registry tokens.
quadrant-chartcartesian
Quadrant (2×2 matrix) chart around Apache ECharts. Median-split scatter with labelled strategy quadrants. Theme-aware via registry tokens.
range-area-chartcartesian
Range-area chart around Apache ECharts. Min/max uncertainty band with an average trend line. Theme-aware via registry tokens.
range-bar-chartcartesian
Range-bar (floating bar / column-range) chart around Apache ECharts. Min–max bands via a transparent base stack, vertical or horizontal, with range labels. Theme-aware via registry tokens.
scatter-chartcartesian
Scatter / bubble chart wrapper around Apache ECharts. Optional point sizing and categorical coloring. Theme-aware via registry tokens.
slope-chartcartesian
Slope and bump chart around Apache ECharts. Rank or value lines across two (slope) or many (bump) points with end labels. Theme-aware via registry tokens.
stacked-area-chartcartesian
Stacked area chart around Apache ECharts. Absolute or 100% stream stacking with smooth curves. Theme-aware via registry tokens.
stacked-bar-chartcartesian
Stacked bar chart around Apache ECharts. Absolute or 100% share stacking with legend; negative stacks diverge for Likert scales. Theme-aware via registry tokens.
theme-rivercartesian
Theme-river (streamgraph) wrapper around Apache ECharts. Stacked areas centred on a baseline along a time axis — good for topic-volume drift over time.
waterfall-chartcartesian
Waterfall chart wrapper around Apache ECharts. Signed deltas accumulate from a transparent base, positives in teal and negatives in orange, with an optional computed Total bar. Theme-aware via registry tokens.

▎Circular— 8 charts

donut-chartcircular
Donut chart wrapper around Apache ECharts. Full and half (semicircle) types, adjustable ring thickness down to a filled pie, rounded segments, gaps, and a centre KPI total. Theme-aware via registry tokens.
gauge-chartcircular
Gauge / speedometer wrapper around Apache ECharts. Threshold-banded stoplight (teal/amber/red), progress-ring, and multi-needle variants. Theme-aware via registry tokens.
liquid-fill-chartcircular
Liquid fill gauge as dependency-free SVG. Animated dual waves rise to the value inside a ring with a centred label. Picks up chart tokens via CSS variables.
nightingale-chartcircular
Nightingale (rose) chart around Apache ECharts. Radius-encoded pie with rounded segments. Theme-aware via registry tokens.
pie-chartcircular
Pie chart wrapper around Apache ECharts. Full pie, donut, rose (Nightingale), and labeled variants. Theme-aware via registry tokens.
progress-ring-chartcircular
Progress ring gauge as dependency-free SVG. Single or concentric rings with a centre summary. Picks up chart tokens via CSS variables.
radar-chartcircular
Radar (spider) chart wrapper around Apache ECharts. Multi-series with optional fill. Theme-aware via registry tokens.
segmented-gaugecircular
Semicircular SVG gauge split into colored segments by relative value. Pure SVG (no ECharts). Rounded line caps + an angular gap between segments produce the pill-shaped look; a center slot lets consumers drop a KPI value + label into the dish.

▎Hierarchy— 6 charts

funnel-charthierarchy
Funnel chart wrapper around Apache ECharts. Conversion-stage visualization with inverted and percentage-label variants. Theme-aware via registry tokens.
icicle-charthierarchy
Icicle (partition) chart around Apache ECharts custom series — ECharts ships no icicle series, so this partitions one rect per node top-down with in-canvas labels. Theme-aware via registry tokens.
smooth-funnelhierarchy
Smoothly tapering SVG funnel with cubic-bezier transitions between stages. Pure SVG (no ECharts). Each stage is colored independently and shows its own percent pill; a minHeight floor keeps tail stages visible at tiny percents.
sunburst-charthierarchy
Sunburst wrapper around Apache ECharts. Concentric-ring hierarchical share visualization — pairs naturally with treemap for comparison.
tree-charthierarchy
Hierarchical tree wrapper around Apache ECharts. Orthogonal (LR/TB/RL/BT) or radial layout, optional roam, focus-on-hover for descendants.
treemap-charthierarchy
Treemap wrapper around Apache ECharts. Hierarchical area-by-value visualization with nested and color-by-value variants. Theme-aware via registry tokens.

▎Flow & Network— 5 charts

alluvial-chartflow
Alluvial (vertical sankey) chart around Apache ECharts. Stage-by-stage flows running top-to-bottom for cohorts, energy, and pipelines. Same fixed categorical palette as the sankey wrapper.
chord-chartflow
Chord diagram around Apache ECharts. Circular nodes with weighted ribbons and adjacency focus. Theme-aware via registry tokens.
graph-chartflow
Network / graph chart wrapper around Apache ECharts. Force-directed, circular, or manual layouts; directed or undirected edges; optional category coloring. Useful for service maps, social graphs, knowledge bases.
parallel-chartflow
Parallel coordinates wrapper around Apache ECharts. Plots high-dimensional rows as polylines across N axes — useful for spotting correlations and outlier clusters.
sankey-chartflow
Sankey flow diagram wrapper around Apache ECharts. Visualizes value flows between named nodes (channels, stages, sources). Gradient links + theme-aware tokens.

▎Distribution— 5 charts

beeswarm-chartdistribution
Beeswarm (jittered strip) plot around Apache ECharts. One dot per observation grouped on rows with deterministic jitter. Theme-aware via registry tokens.
boxplot-chartdistribution
Box-and-whisker plot wrapper around Apache ECharts. Five-number summary (min, Q1, median, Q3, max) per category. Vertical or horizontal.
bullet-chartdistribution
Bullet chart for KPI vs target around Apache ECharts. Qualitative background bands, a foreground actual bar, and a target marker per row. Theme-aware via registry tokens.
error-bar-chartdistribution
Error-bar chart around Apache ECharts custom series. Mean bars with confidence-interval whiskers and caps. Theme-aware via registry tokens.
violin-chartdistribution
Violin chart around Apache ECharts custom series. Gaussian-KDE density halves with quartile box, median dot, and whiskers per group. Theme-aware via registry tokens.

▎Specialty— 7 charts

calendar-heatmapspecialty
Year / quarter calendar heatmap wrapper around Apache ECharts. GitHub-style contribution grid with palette overrides. Theme-aware via registry tokens.
category-distribution-chartspecialty
Category distribution as dependency-free markup. Primary KPI with trend pill, proportional stacked bar, and legend. Shares auto-normalise. Picks up chart tokens via CSS variables.
heatmapspecialty
Grid heatmap wrapper around Apache ECharts with visualMap color ramp. Theme-aware via registry tokens.
sparklinespecialty
Inline micro-chart for KPI tiles. Line, area, bar, and win/loss variants. Theme-aware via registry tokens.
uptime-tracker-chartspecialty
Uptime tracker as dependency-free SVG-friendly markup. 90-day style status bars with an auto-computed uptime % legend. Picks up chart tokens via CSS variables.
waffle-chartspecialty
Waffle chart as dependency-free SVG. 10×10 part-to-whole grid with legend. No extra npm packages.
word-cloud-chartspecialty
Word cloud as dependency-free SVG-friendly markup. Frequency-sized words coloured from the chart palette with hover emphasis. No extra npm packages.

▎Maps— 6 charts

bubble-mapmaps
Proportional symbol bubble map as dependency-free SVG. Eliminates geographic landmass distortion by scaling circle areas to continuous quantitative values with mathematical square-root radius normalization, pulsating concentric ripple rings, multi-tier size legend, and interactive hover cards.
choropleth-map-chartmaps
Choropleth map around Apache ECharts with bring-your-own GeoJSON (registered via registerMap). Value-shaded areas with roam, plus pin markers and curved links. Theme-aware via registry tokens.
dotted-map-chartmaps
Dotted map as dependency-free SVG. Embedded world (96×48) and USA (155×74) landmasks with cartographic AK/HI insets rasterized from Natural Earth/US outlines; lat/lng pins with pulse, vertical/diagonal grids, circle/hexagon dots. No map tokens or geodata fetches.
hexbin-mapmaps
US 50 states + DC hexbin cartogram chart rendered as pure dependency-free SVG. Pointy-top hexagonal grid with automatic color scale ramps, state abbreviation labels, metric values, interactive hover tooltips, and keyboard-accessible state selection.
route-flow-mapmaps
Global route and flight corridor flow map as pure dependency-free SVG. Renders great-circle Bezier curved arcs with traveling aircraft or data pulses via native SVG motion, origin and destination telemetry hubs, and hover inspection cards.
vector-mapmaps
Pure dependency-free SVG world landmass vector map. Features high-resolution continental paths (North America, South America, Europe, Africa, Asia, Oceania, UK, Japan) with region data shading, interactive pulsing pins, curved flight routes, and rich telemetry hover popovers.

▎Custom— 1 chart

raw-chartcustom
Escape-hatch wrapper that takes a full ECharts option object. Lets you build any ECharts type (sankey, sunburst, candlestick, graph, boxplot, parallel, themeRiver, custom) with full customization. Theme-aware exports available via useChartTheme.