JavaScript Chart Examples: A Visual Gallery of Every Chart Type
Thirty-six JavaScript chart examples in one place: bars, lines, pies, heatmaps, trees, gauges. Scan the type, then pick a library.
Search JavaScript chart examples and you get one bar chart, a Chart.js hello-world, and a D3 force layout pretending to be the same thing. This page is the scan: 37 live SVG examples of the chart types I actually see in dashboards and docs. Dummy data. Real shapes.
Pick the type first. Then pick a library. Bars, heatmaps, maps, org charts, and networks have longer writeups. The 37 below are the catalog.
Quick pick
Not sure which type to reach for? Start from the question you're trying to answer, not the shape you think looks good.
| What you want to show | Chart to reach for |
|---|---|
| Compare amounts across categories | Vertical or horizontal bar |
| Rank items by value | Horizontal bar, lollipop |
| Track change over time | Line, area, or step line |
| Show composition (share of a whole) | Donut, pie, treemap, or waffle |
| Compare two time periods or cohorts | Grouped bar or slope |
| Show cumulative gains and losses | Waterfall |
| Display actual vs target | Bullet chart |
| Show stock or asset price movement | Candlestick |
| Map tasks to a timeline | Gantt |
| Find correlation between two variables | Scatter or bubble |
| Show distribution or spread | Histogram, box plot, or ridgeline |
| Compare a profile across multiple dimensions | Radar / spider |
| Show density across two category axes | Heatmap |
| Track daily activity over a year | Calendar heatmap |
| Show flow or transfer between categories | Sankey |
| Show network connections or dependencies | Network graph or org chart |
| Break down a hierarchy by size | Treemap or sunburst |
Bars
Length is the encoding. If you can shuffle the x-axis labels, start here. Full bar chart guide →
Vertical bar
Compare quantities across a small set of categories.
Horizontal bar
Vertical bar flipped — better when labels are long or there are many items to rank.
Grouped bar
Compare two or three series side by side within each category.
Stacked bar
Shows composition and total at the same time. Middle segments are hard to compare across categories.
Lollipop
A bar with less ink — the dot draws the eye to the value without the full rectangle.
Bullet
Actual vs target with a reference band. The bar chart that should have replaced the gauge.
Waterfall
Running total that shows gains and losses step by step — useful for budget or P&L breakdowns.
Histogram
Distribution of a continuous variable split into equal-width bins.
Population pyramid
Back-to-back horizontal bars for two groups — classic for age and gender splits.
Lines and time
The path between points is the point. Use a line when the x-axis is time or a continuous scale where the in-between matters.
Line
A value changing over time. The slope is what matters, not the individual point.
Multi-line
Two or more series on the same time axis — good for direct comparison.
Area
Line with the region beneath filled. Emphasizes cumulative volume.
Stacked area
Shows both the total and the mix of components over time.
Step line
Discrete state changes — price levels, feature flags, thresholds.
Sparkline
A tiny inline trend with no axes — just the shape, used in tables and summary cards.
Slope
Compares values at exactly two points for multiple items. Rises and falls are immediately visible.
Candlestick
Open, high, low, close for a time period — the standard for financial price charts.
Gantt
Tasks stretched across a timeline — the go-to for project planning.
Parts of a whole
Share, mix, nested share. Past five or six slices I go back to a bar chart — angle is harder to compare than length.
Pie
Proportion of a whole. Works for three to five slices — breaks down beyond that.
Donut
Pie with a center hole that can hold a summary number or label.
Polar area
Like a pie, but radius encodes value instead of angle. Each slice spans an equal angle.
Radar / spider
Multiple variables on radial axes — compare profiles or performance across several dimensions at once.
Funnel
Stages of a process where volume shrinks — conversion rates, sales pipelines.
Gauge
A single value on a semi-circular track. Common in dashboards, often overused.
Radial bar
Concentric arcs each showing a proportion. A fancier alternative to a grouped bar.
Waffle
A 10×10 grid of cells — each cell is 1%. Intuitive and honest percentage read.
Treemap
Nested rectangles sized by value. Good for hierarchical data like file sizes or budget breakdowns.
Distribution
Where the values actually sit, not just the average. Heatmap deep-dive →
Scatter
Each point is an observation. Reveals correlation, clusters, and outliers.
Bubble
Scatter with a third variable encoded as circle area.
Box plot
Median, quartiles, and whiskers — the full distribution at a glance without a histogram.
Heatmap
Value intensity across two category axes — peak hours, feature-cohort tables, correlation matrices.
Calendar heatmap
Daily values over a year — the GitHub-style contribution graph.
Ridgeline
Overlapping density curves offset by a category — shows how distributions shift across groups.
Hierarchy and flow
Trees, pipes, and graphs. Not charts in the Chart.js sense. Org chart → · Sankey → · Networks →
Org chart
Reporting hierarchy as a top-down tree of connected boxes.
Sankey
Weighted flows between nodes — energy systems, budget allocations, user paths through a funnel.
Network
Nodes and edges showing relationships, dependencies, or graph data.
Sunburst
Hierarchical part-to-whole where outer rings break down the inner sections.
Starter snippets
Every chart in the gallery is a variation on two ideas: map a value to a rectangle height (bar), or map a series to a path (line). Here's the smallest working version of each.
SVG bar chart
const data = [12, 19, 8, 15, 22];
const width = 320;
const height = 168;
const pad = { l: 28, r: 8, t: 12, b: 28 };
const innerW = width - pad.l - pad.r;
const innerH = height - pad.t - pad.b;
const max = 24;
const slot = innerW / data.length;
const barW = slot * 0.55;
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
data.forEach((value, i) => {
const barH = (value / max) * innerH;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", pad.l + i * slot + (slot - barW) / 2);
rect.setAttribute("y", pad.t + innerH - barH);
rect.setAttribute("width", barW);
rect.setAttribute("height", barH);
rect.setAttribute("fill", "#e8b84a");
svg.appendChild(rect);
});
document.querySelector("#chart").appendChild(svg);
For a line chart, map each data point to an (x, y) coordinate and join them with an SVG path. The area fill is just the same path closed back to the baseline.
SVG line chart
const data = [12, 18, 14, 22, 19, 28, 24];
const width = 320;
const height = 168;
const pad = { l: 24, r: 10, t: 14, b: 24 };
const innerW = width - pad.l - pad.r;
const innerH = height - pad.t - pad.b;
const max = 32;
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
const pts = data.map((v, i) => ({
x: pad.l + (i / (data.length - 1)) * innerW,
y: pad.t + innerH - (v / max) * innerH,
}));
// Area fill
const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
const last = pts[pts.length - 1];
fill.setAttribute(
"d",
pts.map((p, i) => (i ? "L" : "M") + p.x + "," + p.y).join(" ") +
` L${last.x},${pad.t + innerH} L${pts[0].x},${pad.t + innerH} Z`
);
fill.setAttribute("fill", "rgba(232,184,74,0.18)");
svg.appendChild(fill);
// Line
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", pts.map((p, i) => (i ? "L" : "M") + p.x + "," + p.y).join(" "));
path.setAttribute("fill", "none");
path.setAttribute("stroke", "#e8b84a");
path.setAttribute("stroke-width", "2");
svg.appendChild(path);
document.querySelector("#chart").appendChild(svg);
For tooltips, responsive axes, and a time scale that handles irregular gaps, stop here and reach for Chart.js, ECharts, or Plotly. In React, Recharts examples. Custom layout is D3.
Questions I get
Where can I find JavaScript chart examples?
This gallery is the scan I wanted: 37 live SVG examples of common chart types. For a full walkthrough of one type, jump to the linked posts for bars, heatmaps, maps, org charts, or Cytoscape networks.
What is the most common JavaScript chart type?
Bar and line. If the x-axis is categories, bar. If it's time and the in-between matters, line. Everything else on this page is a special case of those two plus 'paint a table' (heatmap) and 'node-link' (network).
Do I need a library for these JavaScript chart examples?
The previews here are plain SVG. That's enough for a gallery and for a small static chart. Chart.js, ECharts, Plotly, or Recharts once you need tooltips, zoom, and a time axis that isn't a weekend project.
How do I choose a chart type?
Start from the question, not the shape. Compare magnitudes: bar. Show change over time: line. Parts of a whole: bar or donut, not a 12-slice pie. Relationships: scatter or network. Composition over two dimensions: heatmap or treemap.
Which JavaScript chart library covers the most types?
ECharts and Plotly have huge type lists. D3 can draw anything and ships nothing ready-made. Chart.js covers the everyday set. This page is the type catalog; the library pages are how you'd ship one.
