Variance Explainer
Waterfall: what drove a KPI change, with drill-down into factors. Pro · Charts and analytics › Analysis and scenarios
Why a KPI moved: a waterfall from the old value to the new one, one bar per factor, any factor with finer factors opens into its own waterfall (with a path back up). A list of contributions repeats the chart as text, and a gap between the factors and the total is shown, not hidden.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add variance-explainernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { VarianceExplainer } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
start * | { label: string; value: number } | The KPI before: label ("Сентябрь") and value. | |
end | { label: string; value: number } | The KPI after. Default: start plus every factor; a difference shows as an "unexplained" step. | |
factors * | VarianceFactor[] | Contributions to the change; factors with children can be broken down. | |
path | string[] | Drill-down path of factor ids. | |
defaultPath | string[] | EMPTY | Initial path when uncontrolled. |
onPathChange | (path: string[]) => void | Called when the reader drills into a factor or goes back up. | |
sort | 'given' | 'impact' | 'given' | impact orders factors by absolute contribution; given keeps your order. Default given. |
format | ValueFormat | {} | How values read. |
currency | string | ISO 4217 code for format: 'currency'. | |
height | number | 220 | Height of the bars area in px. Default 220. |
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<VarianceExplainerLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Gauge Chart — Radial gauges
- Metric Comparison — Metric comparison
- Analytics Filter Bar — Dashboard filters
- Scenario Simulator — Assumption sliders update the forecast, uncertainty band and KPIs
- Map Layer Story — Map story: each step toggles data layers and frames a region, no WebGL
- 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
- Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
- Candlestick Chart — Stock candlesticks with volume and moving averages
Previous: Scenario Simulator · Next: Map Layer Story · All Charts and analytics