This batch opens a new corner of the collection: real data visualization built on Apache ECharts instead of hand-rolled SVG. All ten load the genuine echarts.min.js from a CDN and lean on the parts of the library that are easy to get wrong the first time — dataZoom ranges that have to stay in sync across two axes, a treemap that has to know when to stop revealing levels, and a "live" chart that has to update forever without its memory growing forever. None of these are toy configurations; every one is the kind of chart an actual analytics or ops dashboard would ship.
Every one is a live, interactive preview you can try right here in the article, and each exports to React, Vue, Angular or Tailwind in one click from its snippet page.
What these ten get right
- Zoom that stays in sync across two panels, not one. The candlestick chart shares a single dataZoom and a linked crosshair across its price and volume panels, so dragging the slider — or hovering a candle — never leaves the two panels looking at different dates.
- Percentages relative to the step before, not the top. The funnel chart computes each stage's conversion rate against the stage directly above it, which is the number that actually finds the weakest step — percent-of-total quietly hides exactly that.
- Drilling down one level at a time, on purpose. The storage treemap sets
leafDepth: 1so the first view shows only the five top-level categories — without it, every grandchild in the dataset renders flattened together with no category left to click. - A sliding window, not a growing array. The realtime chart trims points older than sixty seconds off the front of its data array on every tick, so a chart left running for an hour uses the same memory as one left running for a minute.
- A total that updates from what's actually visible. The revenue line's header sum isn't computed once — a dataZoom event handler recalculates it from only the currently zoomed-in range, every time you drag.
1. ECharts Animated Revenue Line with Zoom Brush
A 90-day revenue line with a gradient area fill, a draggable zoom slider, and a running total that recalculates for whatever date range is currently in view.
How it works: two dataZoom components — one inside for scroll/pinch, one slider for the draggable handles — share the same start/end percentages, so ECharts keeps them synchronized automatically. A dataZoom event fires on every drag or scroll, and its handler reads the current range back off chart.getOption(), maps it to array indices, and sums only that slice of the data — which is why the header total changes as you zoom instead of staying fixed to the whole dataset.
Best for: revenue dashboards, analytics products, and any metric-over-time chart where readers need both the big picture and a way to drop into one specific week. Tip: pair with the stacked area traffic chart elsewhere in this collection for a trend-plus-composition view of the same period.
Grab the code: ECharts Animated Revenue Line with Zoom Brush
2. ECharts KPI Gauge Cluster
Three speedometer-style gauges — CPU, memory, and uptime — sharing one chart instance, animating to new readings every few seconds.
How it works: each gauge is its own series entry with a center given as a percentage pair, which is what positions three gauges side by side in a single echarts.init call instead of stacking them on top of each other. Custom startAngle/endAngle values sweep the arc across roughly three-quarters of a circle for the speedometer shape, and detail: { valueAnimation: true } is the one line that makes each number roll smoothly to its new value instead of jump-cutting on every update.
Best for: ops dashboards, SLA and uptime pages, and SaaS usage panels showing several percentage-based KPIs at once. Tip: pair with the live-updating realtime chart elsewhere in this collection for a fuller live ops board.
Grab the code: ECharts KPI Gauge Cluster
3. ECharts Sankey User Flow Diagram
A user journey from landing page through signup, trial, and paid conversion, with every drop-off path drawn as a proportionally-sized ribbon instead of hidden inside a shrinking bar.
How it works: the whole diagram is two flat arrays — named nodes, and { source, target, value } links between them — with no manual layout math; ECharts derives every column position and ribbon thickness from the graph itself. The two outcome nodes, Paid and Churned, are reached by paths of different lengths, so both get an explicit depth: 4 to pin them into the same rightmost column. Hovering a node or ribbon with emphasis.focus: 'adjacency' dims everything not directly connected to it, which is what makes one specific path traceable in a diagram this dense.
Best for: product analytics, growth reviews, and any report where seeing where users actually go matters more than a single conversion percentage. Tip: pair with the funnel conversion chart elsewhere in this collection for the same journey's stage-by-stage numbers.
Grab the code: ECharts Sankey User Flow Diagram
4. ECharts Calendar Heatmap
A GitHub-style contribution graph — a full year of daily activity as a color-scaled grid, with an exact count on hover and a running yearly total in the header.
How it works: the heatmap series targets coordinateSystem: 'calendar' instead of the usual Cartesian grid, so a plain [date, value] pair is enough — ECharts converts each date into the correct week-column and day-row cell itself. A visualMap component set to show: false still does its job of mapping each value to a color along the five-stop green scale; it just doesn't render its own legend, which would be redundant here. The sample data comes from a seeded generator weighted toward zero, so most days are quiet and only some burst, matching what a real activity graph actually looks like.
Best for: developer profile pages, habit and streak trackers, and any daily-count metric worth seeing as a full year at a glance. Tip: pair with the treemap storage breakdown elsewhere in this collection for a category view of the same kind of data.
Grab the code: ECharts Calendar Heatmap
5. ECharts Funnel Conversion Chart
A five-stage checkout funnel where each segment's label shows its conversion rate relative to the stage above it — the number that actually finds the weakest step.
How it works: before the chart option is even built, a small pass over the stage data computes each stage's rate against the one directly before it, not against the top of the funnel — that precomputed array is what both the inline labels and the tooltip read from. sort: 'none' keeps the funnel in the stages' real sequential order instead of ECharts' default largest-first sort, and minSize: '18%' floors every segment's width so the smallest stage near the bottom stays readable instead of shrinking to an unreadable sliver.
Best for: e-commerce checkout analysis, onboarding flow reviews, and sales or hiring pipelines. Tip: pair with the Sankey user flow diagram elsewhere in this collection to see exactly where the users who don't convert actually go.
Grab the code: ECharts Funnel Conversion Chart
6. ECharts Treemap Storage Breakdown
A clickable storage breakdown where box area encodes size — click a category to zoom into its subcategories, click the header to zoom back out.
How it works: leafDepth: 1 is what keeps the first view to exactly the five top-level categories — without it, ECharts renders every leaf in the whole nested dataset at once, with no "Photos" or "Videos" box left to click. nodeClick: 'zoomToNode' handles the drill-in itself, and getting back out calls chart.dispatchAction({ type: 'treemapRootToNode', targetNode: '' }), since re-calling setOption would just redraw the same zoomed-in view rather than resetting it. Each top-level node carries its own explicit itemStyle.color so a category's color never shifts depending on how the values happen to rank.
Best for: storage and disk usage screens, budget breakdowns, and org headcount views with a real drill-down hierarchy. Tip: pair with the calendar heatmap elsewhere in this collection for a second, time-based view of usage.
Grab the code: ECharts Treemap Storage Breakdown
7. ECharts Stacked Area Traffic Breakdown
Five traffic sources stacked into one 14-day area chart — click any legend item to drop it from the stack and watch the total re-draw automatically.
How it works: every series shares the identical stack: 'total' string, which is the only thing that turns five separate area charts into one stacked one — ECharts sums whichever series are currently visible at each x position. Toggling a legend entry to hide a source is a built-in interaction, and because the stack total is recomputed from what's still visible, hiding "Paid Ads" doesn't leave a gap — the remaining four simply re-sum to a smaller total. emphasis.focus: 'series' dims everything but the hovered area, so one source's shape can be traced through the stack.
Best for: marketing analytics, revenue composition reports, and infrastructure load breakdowns by service or region. Tip: pair with the revenue line chart elsewhere in this collection for trend plus composition on an executive dashboard.
Grab the code: ECharts Stacked Area Traffic Breakdown
8. ECharts Radar Skill Comparison
Two overlapping profiles — a candidate and a role's requirements — across six skill axes, so gaps and strengths are visible without reading a single number.
How it works: the six-axis grid is declared once as its own radar component, and the actual comparison lives in the series' data array as two separate profile objects, each with its own values, fill, and line style — adding a third profile is just a third object in that array. The role-requirement line is dashed as well as differently colored, deliberately, so the two shapes stay distinguishable without relying on color perception alone. Every axis shares the same max, which keeps the hexagon grid regular so a given radius means the same thing on every axis.
Best for: hiring and performance reviews, competitive product analysis, and quarter-over-quarter capability tracking. Tip: pair with the stacked area traffic chart elsewhere in this collection as a second multi-series comparison pattern.
Grab the code: ECharts Radar Skill Comparison
9. ECharts Candlestick with Volume Panel
A price candlestick chart with a color-matched volume panel underneath, both zooming and crosshair-syncing together as one linked chart.
How it works: a two-entry grid array stacks a tall price region above a short volume region inside one canvas, with every axis and series assigned to one of the two via gridIndex. Both dataZoom entries list xAxisIndex: [0, 1], so a single slider drives both panels' visible range together, and axisPointer: { link: [{ xAxisIndex: 'all' }] } keeps the hover crosshair aligned across both. Each volume bar's color is computed from that same day's own open-versus-close, not set independently, so the volume panel alone tells you whether heavy days were up or down.
Best for: trading and finance dashboards, crypto trackers, and portfolio detail views needing the standard price-plus-volume layout. Tip: pair with the live-updating realtime chart elsewhere in this collection for a streaming-price variant of the same idea.
Grab the code: ECharts Candlestick with Volume Panel
10. ECharts Live-Updating Realtime Chart
A sliding one-minute window that adds a new data point every second, drops old points off the front, and includes a genuine pause/resume control.
How it works: every second, one new [timestamp, value] point is pushed onto the data array, and a while loop trims off every point older than the visible window from the front — since points are always appended in increasing time order, the oldest ones are always first, so the array's length stays roughly constant no matter how long the chart runs. Each tick calls chart.setOption({ series: [{ data }] }) with only the changed data rather than rebuilding the whole option, which ECharts merges into what's already configured. Pausing doesn't stop the interval at all — it flips a boolean the interval checks before doing anything, which is simpler than tearing the timer down and recreating it.
Best for: server and infra monitoring, IoT dashboards, live trading tickers, and any metric that has to keep updating without leaking memory. Tip: pair with the KPI gauge cluster elsewhere in this collection for a fuller live ops room.
Grab the code: ECharts Live-Updating Realtime Chart
ECharts vs. Chart.js vs. D3.js: which one for which chart?
All ten snippets above use ECharts specifically, and it's worth being clear about why, since the three libraries aren't really competing for the same job.
- Chart.js covers the common chart types — line, bar, pie, doughnut — with the smallest API surface of the three. It's the right default for a straightforward dashboard chart with no unusual interaction, but it has no built-in Sankey, treemap, or calendar heatmap, and linking two chart panels together (like the candlestick-plus-volume pattern above) means wiring that up yourself.
- D3.js isn't a charting library at all — it's a toolkit for binding data to arbitrary SVG or Canvas elements. That's exactly what you want when a design calls for something genuinely custom that no chart library has a name for, but it means building axes, scales, and transitions from primitives every time, even for a chart type ECharts ships as a one-line
series.type. - ECharts sits between them: a large catalog of ready-made, unusual chart types (Sankey, treemap, calendar heatmap, gauge, candlestick) that Chart.js doesn't have, plus the composable pieces — linked axes, synced dataZoom, shared tooltips across grids — needed to combine them into one dashboard, without dropping down to raw SVG the way D3 requires.
As a rule of thumb: reach for Chart.js when the chart is a standard type and the bundle size matters most, D3.js when the visualization is genuinely bespoke and no library has the chart type built in, and ECharts — as in every snippet above — when you need one of its less common built-in chart types, or need several charts to zoom, filter, or highlight in sync with each other.
Same as every batch before it, each of these ten lives in the category that actually fits its shape, so they surface alongside every other snippet of that kind rather than sitting in a library of their own. Find these ten and every other data-visualization snippet in the collection in one place via the Data Visualization tag. Open any of them above and you land straight in the live editor, HTML/CSS/JS tabs and all; click Save as to copy it into My Code and start changing it.
