Confidence Band Chart
Forecast with confidence intervals and outliers, keyboard-readable points. Pro · Charts and analytics › Trends
A forecast with its uncertainty: actual values, the forecast line, an inner and an outer interval, and the actuals that fell outside it. Every point can be read with the arrow keys or the pointer, the legend is a real list and the data is also a table for screen readers.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add confidence-band-chartnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ConfidenceBandChart } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
data * | BandPoint[] | Points in time order: actual values, forecasts and their intervals (any may be missing). | |
levels | [inner: number, outer: number] | [0.5, 0.95] | Confidence of the inner and outer interval, for the legend. Default [0.5, 0.95]. |
format | ValueFormat | {} | How values read: plain, percent, currency or an Intl unit. |
currency | string | ISO 4217 code for format: 'currency'. | |
height | number | 240 | Plot height in px. Default 240. |
showOutliers | boolean | true | Mark actual values outside the outer interval. Default true. |
defaultIndex | number | Point read out at first (keyboard and pointer move it). Default: the last actual. | |
loading | boolean | false | Data is loading: skeleton. |
error | ReactNode | Loading failed: shown instead of the chart. | |
title | ReactNode | Heading. Default: labels.title. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
locale | string | BCP 47 locale for numbers; defaults to the ThemeProvider's. | |
labels | Partial<ConfidenceBandChartLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Line Chart — Line charts
- Bar Chart — Bar charts
- Area Chart — Filled area charts
- Scatter Chart — Scatter and bubble charts with a trend line
- Sparkline — Tiny inline charts
- Candlestick Chart — Stock candlesticks with volume and moving averages
- Donut Chart — Donut charts
- Treemap — Hierarchies as areas, with drill-down
- Funnel Chart — Conversion funnels
- Sankey Chart — Flow diagrams between stages
- Radar Chart — Radar charts for comparing profiles
- Heatmap — Heatmaps
Previous: Sparkline · Next: Candlestick Chart · All Charts and analytics