demo D291
Forecast Confidence Bands: Chart a Trend With Its Uncertainty in Angular
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.
This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.
The configuration
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template:
'<div id="chart" style="height:300px"></div>' +
'<lattice-grid [config]="grid" style="display:block;height:320px;margin-top:14px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
@ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;
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 */],
};
ngAfterViewInit() {
createChart({
grid: this.gridRef.grid, container: '#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',
});
}
}
bootstrapApplication(AppComponent, {
providers: [provideLattice({ createGrid })],
});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.