webdevpuneet.com

Related Snippets

93 in Charts category
54–59 of 60

Range Area Chart

Timeline Chart

Lollipop Chart

Bump Chart

Population Pyramid

Grouped Bar Chart

Range Area Chart — Min/Max Band with Average Line

Range Area Chart · Charts · Plain HTML, CSS & JS · Live preview

CategoryCharts
TagsSVGData Visualization

Copy & paste

Source Code

<div class="ra-card">
  <div class="ra-head"><h3>Daily temperature</h3><span class="ra-sub">min–max band · 7 days</span></div>
  <div class="ra-wrap">
    <svg class="ra-svg" id="raSvg" viewBox="0 0 320 180" preserveAspectRatio="none" aria-label="Range area chart"></svg>
    <div class="ra-tip" id="raTip" hidden></div>
  </div>
  <div class="ra-x" id="raX"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Min/max band
One closed path encloses the area between two series.
Gradient fill
Warm-to-cool vertical gradient encodes high vs low.
Edge lines
Thin strokes keep each boundary legible.
Average line
Midpoint trend through the band's center.
Padded scale
Y-range extends past the data so the band breathes.
Hover guide + dots
Reads both edges with a range tooltip.
Column hit areas
Reliable nearest-point selection anywhere.
No library
Pure HTML/CSS/JS/SVG — no chart dependency.

About this UI Snippet

Range Area Chart — Min/Max Band, Average Line and Hover Readout

Screenshot of the Range Area Chart snippet rendered live

A range area chart fills the band between a low and a high series over time — daily temperature min/max, price ranges, confidence intervals, best/worst case. It shows spread, not just a single line, so you see both the trend and its uncertainty. This snippet renders one in pure SVG with a gradient band, edge lines, an average line, and a hover guide, in plain HTML, CSS, and vanilla JavaScript.

The band path

The shaded range is a single closed SVG path: it traces the high series left-to-right across the points, then the low series right-to-left back to the start, and closes — enclosing the area between them. A vertical linearGradient fill (warm at the top edge, cool at the bottom) reinforces that the top is "high" and the bottom is "low". This is the same boundary-tracing technique as an area chart, applied to two series instead of one and a baseline.

Edge and average lines

Thin lines stroke the high and low boundaries so each series stays legible at its edge, and a bright average line (the midpoint of low and high at each point) runs through the middle to show the central trend. Together they let you read the typical value and the spread around it in one glance — the whole point of a range chart over a plain line.

Responsive SVG with a clean scale

A fixed viewBox with preserveAspectRatio="none" stretches the chart to any width while the math stays in tidy coordinates, and the y-scale is padded a couple of units beyond the data so the band doesn't touch the edges. Horizontal gridlines give reference levels.

Hover guide and dual readout

Hovering shows a dashed vertical guide and dots on both the high and low edges at that point, with a tooltip giving the range ("9° to 17°"). Invisible column hit areas spanning the midpoints between points make the nearest day select reliably anywhere in its column, even near the thin edges.

Data-driven and dependency-free

The chart takes parallel LOW and HIGH arrays and an axis labels array, so changing the data or adding points needs no code edits — the band, lines, scale, and hit areas all derive from them. With no chart library, it's a clean reference for the range-band pattern used in weather, finance, and forecast UIs.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA min–max temperature band renders with an average line.
  2. 2
    Use your dataEdit the LOW and HIGH arrays and the DAYS labels.
  3. 3
    Hover the chartA guide and dots show the range at that point.
  4. 4
    Read the spreadBand height is the range; the bright line is the average.
  5. 5
    RecolorChange the gradient stops and edge line colors.
  6. 6
    ResizeIt stretches to its container via preserveAspectRatio.

Real-world uses

Common Use Cases

Weather forecasts
Show daily high and low temperatures as a band with an average line, the way a weather forecast widget would summarise the week.
Daily price ranges
Show each day's high-to-low price range next to a candlestick chart, with a warm-to-cool gradient marking highs versus lows.
Forecast confidence intervals
Plot uncertainty around a forecast line so decision-makers see the spread of likely outcomes and not just one confident number.
Best and worst case projections
Visualise scenario spreads for revenue or cost projections, with edge lines keeping each boundary legible and the average line showing the midpoint trend.
Performance envelopes
Show minimum and maximum latency or load over time, so a widening band signals instability before the average moves.
Related: Sunburst Chart
See the Sunburst Chart for a related charts pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

It is one closed SVG path: the high series is traced left-to-right across the points, then the low series is appended right-to-left back to the start, and the path is closed. This encloses exactly the area between the two boundaries. A vertical linear gradient fills it so the top reads as high and the bottom as low — the same approach as an area chart, with the low series acting as the baseline instead of zero.

The band shows spread, but readers also want the central tendency. Drawing a line through the midpoint of low and high at each point gives the typical value, so you can see both the trend and the uncertainty around it at once. Without it, a wide band can obscure where the "expected" value actually sits.

Invisible rectangle hit areas span the midpoints between points, so hovering anywhere in a column selects that point reliably. On hover, a dashed vertical guide and two dots (on the high and low edges) appear at that x, and a tooltip shows the range. Using columns rather than hit-testing the thin edge lines makes the interaction robust at any size.

Two parallel arrays — LOW and HIGH — with one value per point, plus a labels array for the x-axis. The chart computes the scale from the combined min and max (with padding) and derives the band, edge lines, average, and hit areas from these, so changing the data or adding points is just an array edit. Keep LOW, HIGH, and labels the same length.

Compute the band path, edge paths, and average path from your low/high arrays in a memo/computed and render them as SVG paths. Track the hovered index in state to drive the guide, dots, and tooltip via pointer handlers on the column rects. Recharts (Area with two bounds) or visx can replace the math; the data shape is the same. Tailwind users swap the classes for utilities.