Most dashboards don't need a 200KB charting library — they need one clean bar chart, a gauge, and maybe a sparkline. Below are 8 free chart snippets you can preview live and copy in seconds: a bar chart, a donut chart, a gauge, a sparkline, a candlestick chart, a radar chart, a funnel, and an activity heatmap — all built in plain HTML, CSS and SVG.
Each one comes with how the effect actually works, when to reach for it, and a quick tip for customising or keeping it readable. Charting libraries solve real problems — pan, zoom, huge datasets — but for a single dashboard widget or a landing-page stat, they're often overkill. These snippets get you 90% of the visual polish for 0% of the bundle size.
Every snippet below is a live, interactive preview — hover it, resize it, try it right in the article. When you find one you like, hit View / Edit Code to grab the HTML/CSS/JS or export it to React, Vue, Angular or Tailwind.
Do you actually need a charting library?
Reach for D3, Chart.js or Recharts when you need real interactivity at scale — zooming into ten thousand data points, live-streaming updates, or a dozen chart types driven by one config. Reach for a hand-built snippet instead when any of these are true:
- The dataset is small and mostly static — a handful of bars, one gauge value, a week of activity. No library overhead is justified for that.
- Bundle size matters — a marketing page or landing hero shouldn't ship a charting dependency just to show one stat visually.
- You want full styling control — matching a chart's exact colours, radii and fonts to a design system is often faster in raw SVG/CSS than fighting a library's theming API.
- Accessibility is a priority — a hand-built chart can expose real text values in the DOM (for screen readers and copy-paste) in a way canvas-based libraries often can't.
Keep that trade-off in mind as you scroll — every snippet below is production-ready for exactly these cases.
1. Bar Chart
A clean, animated bar chart with hover tooltips and value labels — the single most common chart on the web, built without a single dependency.
How it works: the bars are SVG rects drawn inside a viewBox="0 0 540 240" with preserveAspectRatio set, so widths and gaps are expressed as percentages of that coordinate space rather than pixels — the chart stays sharp at 300px or 900px wide with no ResizeObserver needed. Each bar's height and y-position are computed from the data value against the dataset's max, then grown in with a requestAnimationFrame loop using an ease-out cubic curve rather than a plain CSS transition.
Best for: dashboards, monthly reports, and any "compare N categories" widget. Tip: keep the bar count under 10–12 on mobile — past that, labels start colliding and a horizontal bar chart reads better.
Grab the code: Bar Chart
2. Donut Chart
A segmented donut chart with a centred total, animated segment reveal, and a matching legend — the classic "share of total" visual for revenue, storage, or traffic breakdowns.
How it works: each segment is an SVG <circle> with a stroke-dasharray equal to its share of the circle's circumference and a stroke-dashoffset that positions it after the previous segments — the same trick behind every SVG progress ring, just stacked. Animating stroke-dashoffset on load produces the "sweeping in" reveal.
Best for: "storage used", budget breakdowns, traffic-by-source widgets — anywhere a whole splits into a few named parts. Tip: cap it at five or six segments; beyond that, thin slivers become unreadable and a bar chart communicates the same data more clearly.
Grab the code: Donut Chart
3. Gauge Chart
A semi-circular gauge with a needle that sweeps to the current value on load, colour-banded zones, and a large centred number — the dial you'd expect on a speedometer or a health-score widget.
How it works: the arc uses the same SVG stroke-dasharray/stroke-dashoffset technique as the donut chart, but constrained to a 180° sweep instead of a full circle. The needle is an SVG line inside a group with transform-origin pinned at the arc's centre; JavaScript just sets its rotation angle as a percentage of the gauge's range via transform: rotate(), and a CSS transition on that property handles the smooth sweep — no animation loop involved.
Best for: credit scores, performance scores, speed or capacity indicators — any single value that's more meaningful against a labelled range than as a bare number. Tip: label the colour zones (e.g. "poor / fair / good") directly on the arc so the gauge is legible without a legend.
Grab the code: Gauge Chart
4. Sparkline Chart
A tiny inline trend line with no axes or labels — the chart that fits inside a table cell or a stat card to answer "is this going up or down" in a glance.
How it works: each sparkline is drawn on a small <canvas> rather than SVG — the data points are normalised against the series' min/max range into pixel coordinates, then joined with bezierCurveTo for a smoothed line instead of straight segments, with a soft gradient fill traced underneath down to the baseline. No axes, ticks or gridlines are drawn at all, which is what keeps it small enough to sit inline with text.
Best for: stat cards, table rows, and anywhere you need "trend at a glance" without spending real layout space on a full chart. Tip: pair it with a single end-point dot and a +/- percentage label — the sparkline shows shape, the label gives the number people actually scan for.
Grab the code: Sparkline Chart
5. Candlestick Chart
An open/high/low/close candlestick chart with green and red candles and a hoverable price tooltip — the exact chart type every trading and finance dashboard needs.
How it works: each candle is two stacked elements — a thin "wick" line spanning the high-to-low range and a wider "body" spanning the open-to-close range — both positioned and sized as percentages of the chart's overall price range. The body's colour flips between up and down states depending on whether close is above or below open.
Best for: stock, crypto and forex dashboards where OHLC data matters more than a simple trend line. Tip: don't try to cram more than 30–40 candles into a narrow widget — candlesticks need horizontal breathing room to stay readable, unlike a line chart.
Grab the code: Candlestick Chart
6. Radar Chart
A multi-axis radar (spider) chart comparing several metrics at once inside a polygon shape — perfect for skill breakdowns, product comparisons, or review scorecards.
How it works: each metric gets its own axis radiating from a shared centre point, spaced evenly around 360° using basic trigonometry (sin/cos of each axis's angle). Every data value is plotted along its axis as a distance from centre, and the points are joined into a single SVG <polygon> that fills with a translucent colour.
Best for: comparing 4–8 weighted metrics at once — skill trees, product feature comparisons, review breakdowns. Tip: overlaying two polygons (e.g. "you" vs. "average") on the same axes is where a radar chart earns its keep — a single polygon alone is often less clear than a bar chart.
Grab the code: Radar Chart
7. Funnel Chart
A tapering funnel chart showing drop-off between stages, with each segment's conversion percentage labelled — the standard way to visualise a signup or checkout flow.
How it works: each stage is a plain centred bar, not an SVG shape — its width is set via a --w CSS custom property calculated as a percentage of the top stage's value, then centred with margin: 0 auto. Because every bar is narrower than the one before it and all are centre-aligned, the stack naturally forms the symmetric tapering funnel silhouette with no clip-path or polygon math required.
Best for: signup flows, checkout funnels, sales pipelines — anywhere a fixed sequence of steps loses users along the way. Tip: label both the raw count and the percentage of the previous stage on each segment; percentage-of-total alone hides which specific step is actually leaking users.
Grab the code: Funnel Chart
8. Activity Heatmap
A GitHub-style contribution heatmap — a grid of coloured squares where intensity maps to activity level, with a hover tooltip showing the exact date and count.
How it works: the grid is a CSS Grid of small squares, one per day, generated in JS from a date range. Each square's background colour is picked from a fixed intensity scale by bucketing that day's value (e.g. none / low / medium / high), so the whole grid renders as flat divs with zero canvas or SVG involved — just colour lookups.
Best for: contribution graphs, habit trackers, login-activity or usage-frequency widgets. Tip: always pair colour intensity with a tooltip showing the real number — colour alone can't communicate exact values, and colour-blind users need the fallback.
Grab the code: Activity Heatmap
How to drop these into your project
Every snippet is framework-agnostic, so the workflow is the same wherever you're building:
- Open the snippet and hit View / Edit Code to see the HTML, CSS and JS in separate tabs.
- Paste the HTML into your markup, the CSS into your stylesheet, and the JS (if any) before your closing
</body>tag. - Prefer a component? Use the one-click export to React, Vue, Angular or Tailwind and wire it up to your own data.
- Swap the sample values for your real dataset and adjust the colour scale variables at the top of each snippet to match your brand.
Keep your charts honest and accessible
A chart that looks good but misleads or excludes users isn't doing its job. Three rules cover almost every case:
- Never truncate a bar or gauge axis to exaggerate a difference — start value axes at zero unless you have a specific, clearly labelled reason not to.
- Expose the underlying numbers in the DOM (a
titleattribute, a visually-hidden table, or a tooltip) so screen readers and copy-paste both work, not just the visual shape. - Don't rely on colour alone to separate categories — pair colour with labels, patterns, or position so colour-blind users aren't reading a different chart than everyone else.
Final Thought
These are just 8 of dozens of chart types you can copy for free — no login, no sign-up, no dependency to install. The underlying techniques — proportional SVG stroke offsets, canvas curve drawing, CSS custom-property scaling, grid-based colour buckets, and simple trigonometry for radial layouts — are what every charting library is doing under the hood anyway. Once you've built a few of these by hand, reaching for a full library becomes a deliberate choice instead of a default.
Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at FWD Tools UI Snippets — Charts — it's free and runs entirely in your browser.
