Waaierdiagram API

Zet de prognose en de onzekerheid ervan in één grafiek: historie, een gestippelde mediaan, en betrouwbaarheidsbanden die breder worden naarmate de horizon verder weg ligt - zie de Waaierdiagram-demo.

Import

Web ComponentVanilla JSInsights helper

import "@michi-vz/wc/fan-chart";
// <michi-vz-fan-chart> is now defined

import { mountFanChart } from "@michi-vz/core";

const chart = mountFanChart(el, props);

import { forecastFan } from "@michi-vz/insights/forecast";

const item = forecastFan(history, { horizon: 4, levels: [0.5, 0.8], level: 0.95 }, "Revenue");
const chart = mountFanChart(el, { dataSet: [item], xAxisDataType: "date_annual" });

Props

Prop	Type	Default	Description
`timeline`	`boolean \| TimelinePeriodConfig`	-	Opt-in "play through years" (cumulative): the marks draw UP TO the active period and extend as the timeline steps; `interpolate` sweeps smoothly between years, `false` jump-cuts. Headless controller via `chart.timeline()` plus the built-in play button + scrubber. Off by default; wins over `progressiveDraw` when both are set.
`progressiveDraw`	`boolean \| ProgressiveDrawConfig`	-	Opt-in reveal animation: wipes the marks in left to right on mount (a clip reveal; axes and titles stay put). `true` uses defaults (1200 ms, easeInOutCubic); a config tunes durationMs, easing, autoplay, and replayOnUpdate (`tipLabel` is LineChart-only and ignored here). Off by default; respects prefers-reduced-motion (renders fully drawn instantly) and `replay()` re-runs it.
`dataSet`*	`FanDataItem[]`	-	Array of forecast series, each a median line plus its nested confidence bands
`title`	`string`	-	Optional chart title rendered above the plot
`yAxisDomain`	`[number, number]`	-	Fixed [min, max] for the y-axis; when omitted the domain auto-fits the line plus the widest band extents
`xAxisDataType`	`"date_annual" \| "date_monthly" \| "number"`	`"number"`	How x values are parsed and formatted: yearly dates, monthly dates, or plain numbers
`xAxisFormat`	`(d: number \| string) => string`	-	Formats an x tick value into its display label
`yAxisFormat`	`(d: number \| string) => string`	-	Formats a y tick value into its display label
`ticks`	`number`	`5`	Approximate number of axis ticks to generate
`tickValues`	`Array<number \| Date>`	-	Explicit tick values, overriding the generated ones
`curve`	`"curveBumpX" \| "curveLinear" \| "curveMonotoneX"`	-	Line interpolation: curveLinear, curveMonotoneX, or curveBumpX
`fillOpacity`	`number`	`0.18`	band fill opacity for the widest band (narrower bands scale up from here).
`forecastZone`	`boolean`	-	shade the forecast region (from the last solid point to the end). Default true.
`showDataPoints`	`boolean`	`false`	Draw a marker at each median data point (default false)
`tooltipFormatter`	`(item: FanDataItem, lastPoint: DataPoint \| null) => string`	-	Custom HTML for the tooltip (DOMPurify-sanitized; may include `<a href>` links).
`onHighlightItem`	`(labels: string[]) => void`	-	Called when the hovered/highlighted label(s) change

Common props - shared by every chart (14)

Prop	Type	Default	Description
`width`	`number`	`1000`	Chart width in pixels
`height`	`number`	`500`	Chart height in pixels
`margin`	`Margin`	`{ top: 50, right: 50, bottom: 50, left: 60 }`	Inner margins (top/right/bottom/left, in px) reserved for axes, titles, and labels
`colors`	`string[]`	-	Categorical palette for series/labels without an explicit colour or colorsMapping entry
`colorsMapping`	`Record<string, string>`	-	Explicit label -> colour map; takes precedence over the palette and per-item colours
`highlightItems`	`string[]`	-	Labels to emphasise; all other marks dim
`disabledItems`	`string[]`	-	Labels to hide and exclude from scales/stacks
`renderer`	`"svg" \| "canvas" \| "webgpu"`	`"svg"`	Render as inline SVG (default) or to a canvas (faster for large datasets); getContext() is identical either way
`locale`	`string`	-	BCP-47 locale used for number and date formatting
`skipColorMappingDispatch`	`boolean`	`false`	External-CSS mode: unmapped labels resolve to transparent and onColorMappingGenerated is not emitted, so mark colours come from your CSS via the data-label-safe contract
`enableTransitions`	`boolean`	`true`	Animate updates with CSS transitions (default true)
`onColorMappingGenerated`	`(mapping: Record<string, string>) => void`	-	Called with the resolved label -> colour map after the chart assigns colours
`onChartDataProcessed`	`(context: ChartContext) => void`	-	Called with the renderer-agnostic ChartContext whenever the data is (re)processed
`onDataWarning`	`(warnings: DataWarning[]) => void`	-	Called with any non-fatal data warnings (duplicate labels, non-finite values, non-monotonic dates, ...)

Gebeurtenissen

De webcomponent verzendt deze bubbelende CustomEvents (de engine biedt dezelfde functionaliteit via de on*-callbacks in de tabel hierboven):

Gebeurtenis	Detail	Treedt op wanneer
`michi-vz:highlight`	`string[]`	de highlight bij hover verandert
`michi-vz:colormapping`	`Record<string, string>`	er een kleurtoewijzing wordt gegenereerd
`michi-vz:dataprocessed`	`ChartContext`	gegevens worden (opnieuw) verwerkt
`michi-vz:datawarning`	`DataWarning[]`	invoerwaarschuwingen worden gedetecteerd

getContext()

mountFanChart(el, props).getContext() retourneert een renderer-onafhankelijke FanChartContext (historie-/prognosetellingen per serie, bandniveaus, uiteindelijke onzekerheid, plus een deterministische samenvatting in gewone taal + een a11y-tabel). Zie LLM-context.

Bron

Props zijn getypeerd als FanChartProps in @michi-vz/core.

Waaierdiagram API ​

Import ​

Props ​

Gebeurtenissen ​

getContext() ​

Bron ​