Range chart

Who it’s for

Anyone watching a reading that has zones rather than a target — temperature that must stay in a band, humidity with a comfortable range, a process variable with warning and critical thresholds. The reader is not tracking the exact value; they are checking whether the line is where it should be, and for how long it was not.

What it does

The Range chart plots a time series and colors it by the band each value falls into. With bands set to below −20, −20 to 0, and 0 to 10, a temperature trace shifts through three colors as it crosses those thresholds, and any period outside every defined band is drawn in the out-of-range color.

• Thresholds are drawn into the line itself, so an excursion is visible as a color change rather than as a line crossing an axis value the reader has to know.
• The area under the line can be filled, which makes the time spent in each band read as an area rather than as a thin trace.
• Time spent out of range gets its own color, so gaps in the band definitions are visible instead of silently taking the nearest color.
• Data zoom lets a reader select a period on the chart and look closer without changing the dashboard’s time window.
• Tooltips carry the value, the timestamp and the interval, styled independently.
• The Range chart colors one measurement against static bands: bands that depend on another reading, or on time of day, belong in a calculated field that produces a value the chart can then color plainly.

How to set up

Data keys

The Range chart takes one series per data key, from one or more datasources.

Key	Role	Type	Description
Temperature	The plotted and colored series	Timeseries	Timeseries only — the chart plots history. Add one key per series; the key’s label captions it in the legend and the tooltip.

Ranges

Setting	Default	Effect
Range colors	Below −20, −20 to 0, 0 to 10	The bands and the color each one paints; edit these to your own thresholds
Out of range color	#ccc	Painted where a value falls outside every defined band
Fill area	On	Fills beneath the line so band occupancy reads as area

Define the bands to cover the full range the reading can take, including above the top band and below the bottom one. Anything left uncovered is drawn in the out-of-range color, which is a useful signal when it is deliberate and a confusing one when it is an oversight.

How to customize

• To use your own thresholds — edit Range colors, adding or removing bands so they match the limits the process actually has.
• To make excursions unmistakable — give the top and bottom bands a strongly contrasting color and keep the normal band muted, so the eye is drawn only to the exceptions.
• To draw a plain colored line — turn off Fill area, which suits a chart carrying several series.
• To let readers inspect a period — leave data zoom on so a range can be selected directly on the chart.
• To move or drop the legend — set the legend Position, or turn Legend off on a single-series chart.
• To change what the tooltip reports — turn off Show date or the interval line, and set its date format, fonts and colors.

Tips

• Give the normal band a quiet color and the exception bands loud ones. A chart where every band is equally saturated shows the thresholds but not the problem, and the reader is back to reading values.
• Set the bands to the limits that trigger action, not to round numbers. A band edge at 8 because the pump trips at 8 makes the chart a decision aid; an edge at 10 because it is tidy makes it decoration.