demo D291
A forecast with its confidence band
Shade the range a projection is likely to fall in, so a forecast shows its uncertainty rather than a single confident line: a wider band for where a future day may land, a tighter one for the fitted trend itself
trend: { forecast, band: 'confidence' }
This fits a least-squares trend, projects it past the last reading, and shades the range the forecast is likely to fall in, so a projection shows its uncertainty rather than a single confident line. It answers not just where a series is heading but how sure that estimate is, computed in the browser from the points on screen.
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.47.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.47.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 320px"></div>
<div id="chart" style="height: 300px"></div>
<script type="module">
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
columns: [
{ field: 'day', title: 'Day', type: 'number' },
{ field: 'active', title: 'Active users', type: 'number', total: 'mean' },
],
rows, // one clean, sorted point per day: day, active
});
// A linear trend, projected eight steps past the last day, now carries a
// shaded uncertainty band around the projection. band: 'prediction' (the
// default) shades where a single future day is likely to land; band:
// 'confidence' shades the narrower range for the fitted line itself; band:
// false leaves the bare dashed line. confidence sets the level, 0.95 here.
createChart({
grid,
container: document.getElementById('chart'),
type: 'line',
x: 'day',
y: 'active',
legend: true,
trend: { method: 'linear', forecast: 8, band: 'prediction', confidence: 0.95 },
title: 'The projection, with the range a future day is likely to fall in',
});
</script>A forecast that shows how sure it is
A line carried past the last data point tells you where a series is heading. On its own it can look more certain than it is: one clean line reads as a promise. Shading the range around that line turns the projection back into an honest estimate. The band is widest where the line reaches furthest from the data, because that is exactly where a forecast is least sure of itself.
There are two ranges worth telling apart, and this draws both. The wider one is where a single future day is likely to land, the range you actually plan against when the question is what next week might look like. The tighter one is the range for the fitted trend itself, how much the underlying direction could shift. Both are drawn at a 95% level by default, and both read the grid’s filtered rows, so narrowing the grid refits the trend and reshapes the band with it.
How do I shade a forecast band?
Draw a line chart from the grid and add a trend with method: 'linear' and a forecast step count. The projection now carries a shaded band by default: band: 'prediction' for where a future observation is likely to fall, band: 'confidence' for the narrower range around the fitted line, and band: false for the bare dashed line. Set confidence to change the level from its default of 0.95. The band is computed in the browser alongside the trend, so it follows the data on screen with nothing sent to a server.