Docs Charts Interval & uncertainty

ForecastFanChart

import { useState } from "react";
import { ForecastFanChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
const forecast = [
  {
    x: "Jul",
    y: 2.4,
    p80Low: 2.33,
    p80High: 2.47,
    p95Low: 2.29,
    p95High: 2.51,
  },
  {
    x: "Aug",
    y: 2.48,
    p80Low: 2.37,
    p80High: 2.59,
    p95Low: 2.31,
    p95High: 2.65,
  },
  {
    x: "Sep",
    y: 2.56,
    p80Low: 2.4,
    p80High: 2.72,
    p95Low: 2.31,
    p95High: 2.81,
  },
  {
    x: "Oct",
    y: 2.63,
    p80Low: 2.41,
    p80High: 2.85,
    p95Low: 2.29,
    p95High: 2.97,
  },
  {
    x: "Nov",
    y: 2.69,
    p80Low: 2.4,
    p80High: 2.98,
    p95Low: 2.24,
    p95High: 3.14,
  },
  {
    x: "Dec",
    y: 2.76,
    p80Low: 2.39,
    p80High: 3.13,
    p95Low: 2.17,
    p95High: 3.34,
  },
  {
    x: "Jan",
    y: 2.82,
    p80Low: 2.36,
    p80High: 3.28,
    p95Low: 2.1,
    p95High: 3.54,
  },
  {
    x: "Feb",
    y: 2.88,
    p80Low: 2.33,
    p80High: 3.43,
    p95Low: 2.03,
    p95High: 3.73,
  },
  {
    x: "Mar",
    y: 2.95,
    p80Low: 2.3,
    p80High: 3.6,
    p95Low: 1.96,
    p95High: 3.94,
  },
  {
    x: "Apr",
    y: 3.02,
    p80Low: 2.26,
    p80High: 3.78,
    p95Low: 1.88,
    p95High: 4.16,
  },
  {
    x: "May",
    y: 3.08,
    p80Low: 2.21,
    p80High: 3.95,
    p95Low: 1.79,
    p95High: 4.37,
  },
  {
    x: "Jun",
    y: 3.15,
    p80Low: 2.16,
    p80High: 4.14,
    p95Low: 1.7,
    p95High: 4.6,
  },
];
const bands = [
  {
    id: "p80",
    label: "80% interval",
    data: forecast.map(({ x, y, p80Low, p80High }) => ({ x, y, low: p80Low, high: p80High })),
    opacity: 0.16,
  },
  {
    id: "p95",
    label: "95% interval",
    data: forecast.map(({ x, y, p95Low, p95High }) => ({ x, y, low: p95Low, high: p95High })),
    opacity: 0.08,
  },
];
 
export default function ForecastFanChartDemo() {
  const [bandsMode, setBandsMode] = useState<"discrete" | "gradient">("discrete");
  return (
    <div>
      <VariantToggle
        label="Band encoding"
        options={[
          { value: "discrete" as const, label: "Discrete" },
          { value: "gradient" as const, label: "Gradient" },
        ]}
        value={bandsMode}
        onChange={setBandsMode}
      />
      <ForecastFanChart
        bandsMode={bandsMode}
        bands={bands}
        ariaLabel="Monthly recurring revenue forecast in millions with widening 80% and 95% intervals from July 2026 through June 2027" />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { ForecastFanChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const bandsMode = ref<"discrete" | "gradient">("discrete");
const bandModes = [
  { value: "discrete", label: "Discrete" },
  { value: "gradient", label: "Gradient" },
];
const forecast = [
  {
    x: "Jul",
    y: 2.4,
    p80Low: 2.33,
    p80High: 2.47,
    p95Low: 2.29,
    p95High: 2.51,
  },
  {
    x: "Aug",
    y: 2.48,
    p80Low: 2.37,
    p80High: 2.59,
    p95Low: 2.31,
    p95High: 2.65,
  },
  {
    x: "Sep",
    y: 2.56,
    p80Low: 2.4,
    p80High: 2.72,
    p95Low: 2.31,
    p95High: 2.81,
  },
  {
    x: "Oct",
    y: 2.63,
    p80Low: 2.41,
    p80High: 2.85,
    p95Low: 2.29,
    p95High: 2.97,
  },
  {
    x: "Nov",
    y: 2.69,
    p80Low: 2.4,
    p80High: 2.98,
    p95Low: 2.24,
    p95High: 3.14,
  },
  {
    x: "Dec",
    y: 2.76,
    p80Low: 2.39,
    p80High: 3.13,
    p95Low: 2.17,
    p95High: 3.34,
  },
  {
    x: "Jan",
    y: 2.82,
    p80Low: 2.36,
    p80High: 3.28,
    p95Low: 2.1,
    p95High: 3.54,
  },
  {
    x: "Feb",
    y: 2.88,
    p80Low: 2.33,
    p80High: 3.43,
    p95Low: 2.03,
    p95High: 3.73,
  },
  {
    x: "Mar",
    y: 2.95,
    p80Low: 2.3,
    p80High: 3.6,
    p95Low: 1.96,
    p95High: 3.94,
  },
  {
    x: "Apr",
    y: 3.02,
    p80Low: 2.26,
    p80High: 3.78,
    p95Low: 1.88,
    p95High: 4.16,
  },
  {
    x: "May",
    y: 3.08,
    p80Low: 2.21,
    p80High: 3.95,
    p95Low: 1.79,
    p95High: 4.37,
  },
  {
    x: "Jun",
    y: 3.15,
    p80Low: 2.16,
    p80High: 4.14,
    p95Low: 1.7,
    p95High: 4.6,
  },
];
const bands = [
  {
    id: "p80",
    label: "80% interval",
    data: forecast.map(({ x, y, p80Low, p80High }) => ({ x, y, low: p80Low, high: p80High })),
    opacity: 0.16,
  },
  {
    id: "p95",
    label: "95% interval",
    data: forecast.map(({ x, y, p95Low, p95High }) => ({ x, y, low: p95Low, high: p95High })),
    opacity: 0.08,
  },
];
</script>
 
<template>
  <div>
    <VariantToggle v-model="bandsMode" label="Band encoding" :options="bandModes" />
    <ForecastFanChart
      :bands-mode="bandsMode"
      :bands="bands"
      aria-label="Monthly recurring revenue forecast in millions with widening 80% and 95% intervals from July 2026 through June 2027" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootForecastFanChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
 
@Component({
  selector: "app-forecast-fan-chart-chart-demo",
  standalone: true,
  imports: [GrassrootForecastFanChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Band encoding"
      [options]="bandModes"
      [value]="bandsMode()"
      (valueChange)="setBandsMode($event)"
    /><grassroot-forecast-fan-chart
    [bandsMode]="bandsMode()"
    [bands]="bands"
    ariaLabel="Monthly recurring revenue forecast in millions with widening 80% and 95% intervals from July 2026 through June 2027"
  />`,
})
export class ForecastFanChartDemoComponent {
  readonly bandsMode = signal<"discrete" | "gradient">("discrete");
  readonly bandModes = [
    { value: "discrete", label: "Discrete" },
    { value: "gradient", label: "Gradient" },
  ] as const;
  readonly forecast = [
    {
      x: "Jul",
      y: 2.4,
      p80Low: 2.33,
      p80High: 2.47,
      p95Low: 2.29,
      p95High: 2.51,
    },
    {
      x: "Aug",
      y: 2.48,
      p80Low: 2.37,
      p80High: 2.59,
      p95Low: 2.31,
      p95High: 2.65,
    },
    {
      x: "Sep",
      y: 2.56,
      p80Low: 2.4,
      p80High: 2.72,
      p95Low: 2.31,
      p95High: 2.81,
    },
    {
      x: "Oct",
      y: 2.63,
      p80Low: 2.41,
      p80High: 2.85,
      p95Low: 2.29,
      p95High: 2.97,
    },
    {
      x: "Nov",
      y: 2.69,
      p80Low: 2.4,
      p80High: 2.98,
      p95Low: 2.24,
      p95High: 3.14,
    },
    {
      x: "Dec",
      y: 2.76,
      p80Low: 2.39,
      p80High: 3.13,
      p95Low: 2.17,
      p95High: 3.34,
    },
    {
      x: "Jan",
      y: 2.82,
      p80Low: 2.36,
      p80High: 3.28,
      p95Low: 2.1,
      p95High: 3.54,
    },
    {
      x: "Feb",
      y: 2.88,
      p80Low: 2.33,
      p80High: 3.43,
      p95Low: 2.03,
      p95High: 3.73,
    },
    {
      x: "Mar",
      y: 2.95,
      p80Low: 2.3,
      p80High: 3.6,
      p95Low: 1.96,
      p95High: 3.94,
    },
    {
      x: "Apr",
      y: 3.02,
      p80Low: 2.26,
      p80High: 3.78,
      p95Low: 1.88,
      p95High: 4.16,
    },
    {
      x: "May",
      y: 3.08,
      p80Low: 2.21,
      p80High: 3.95,
      p95Low: 1.79,
      p95High: 4.37,
    },
    {
      x: "Jun",
      y: 3.15,
      p80Low: 2.16,
      p80High: 4.14,
      p95Low: 1.7,
      p95High: 4.6,
    },
  ];
  readonly bands = [
    {
      id: "p80",
      label: "80% interval",
      data: this.forecast.map(({ x, y, p80Low, p80High }) => ({
        x,
        y,
        low: p80Low,
        high: p80High,
      })),
      opacity: 0.16,
    },
    {
      id: "p95",
      label: "95% interval",
      data: this.forecast.map(({ x, y, p95Low, p95High }) => ({
        x,
        y,
        low: p95Low,
        high: p95High,
      })),
      opacity: 0.08,
    },
  ];
  setBandsMode(value: string): void {
    if (value === "discrete" || value === "gradient") this.bandsMode.set(value);
  }
}
 
export default ForecastFanChartDemoComponent;

<script lang="ts">
  import { ForecastFanChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let bandsMode = $state<"discrete" | "gradient">("discrete");
  const bandModes = [
    { value: "discrete", label: "Discrete" },
    { value: "gradient", label: "Gradient" },
  ];
  const forecast = [
    {
      x: "Jul",
      y: 2.4,
      p80Low: 2.33,
      p80High: 2.47,
      p95Low: 2.29,
      p95High: 2.51,
    },
    {
      x: "Aug",
      y: 2.48,
      p80Low: 2.37,
      p80High: 2.59,
      p95Low: 2.31,
      p95High: 2.65,
    },
    {
      x: "Sep",
      y: 2.56,
      p80Low: 2.4,
      p80High: 2.72,
      p95Low: 2.31,
      p95High: 2.81,
    },
    {
      x: "Oct",
      y: 2.63,
      p80Low: 2.41,
      p80High: 2.85,
      p95Low: 2.29,
      p95High: 2.97,
    },
    {
      x: "Nov",
      y: 2.69,
      p80Low: 2.4,
      p80High: 2.98,
      p95Low: 2.24,
      p95High: 3.14,
    },
    {
      x: "Dec",
      y: 2.76,
      p80Low: 2.39,
      p80High: 3.13,
      p95Low: 2.17,
      p95High: 3.34,
    },
    {
      x: "Jan",
      y: 2.82,
      p80Low: 2.36,
      p80High: 3.28,
      p95Low: 2.1,
      p95High: 3.54,
    },
    {
      x: "Feb",
      y: 2.88,
      p80Low: 2.33,
      p80High: 3.43,
      p95Low: 2.03,
      p95High: 3.73,
    },
    {
      x: "Mar",
      y: 2.95,
      p80Low: 2.3,
      p80High: 3.6,
      p95Low: 1.96,
      p95High: 3.94,
    },
    {
      x: "Apr",
      y: 3.02,
      p80Low: 2.26,
      p80High: 3.78,
      p95Low: 1.88,
      p95High: 4.16,
    },
    {
      x: "May",
      y: 3.08,
      p80Low: 2.21,
      p80High: 3.95,
      p95Low: 1.79,
      p95High: 4.37,
    },
    {
      x: "Jun",
      y: 3.15,
      p80Low: 2.16,
      p80High: 4.14,
      p95Low: 1.7,
      p95High: 4.6,
    },
  ];
  const bands = [
    {
      id: "p80",
      label: "80% interval",
      data: forecast.map(({ x, y, p80Low, p80High }) => ({ x, y, low: p80Low, high: p80High })),
      opacity: 0.16,
    },
    {
      id: "p95",
      label: "95% interval",
      data: forecast.map(({ x, y, p95Low, p95High }) => ({ x, y, low: p95Low, high: p95High })),
      opacity: 0.08,
    },
  ];
</script>
 
<div>
  <VariantToggle
    label="Band encoding"
    options={bandModes}
    value={bandsMode}
    onchange={(value) => (bandsMode = value as typeof bandsMode)}
  />
  <ForecastFanChart
    {bandsMode}
    {bands}
    ariaLabel="Monthly recurring revenue forecast in millions with widening 80% and 95% intervals from July 2026 through June 2027" />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { ForecastFanChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
const forecast = [
  {
    x: "Jul",
    y: 2.4,
    p80Low: 2.33,
    p80High: 2.47,
    p95Low: 2.29,
    p95High: 2.51,
  },
  {
    x: "Aug",
    y: 2.48,
    p80Low: 2.37,
    p80High: 2.59,
    p95Low: 2.31,
    p95High: 2.65,
  },
  {
    x: "Sep",
    y: 2.56,
    p80Low: 2.4,
    p80High: 2.72,
    p95Low: 2.31,
    p95High: 2.81,
  },
  {
    x: "Oct",
    y: 2.63,
    p80Low: 2.41,
    p80High: 2.85,
    p95Low: 2.29,
    p95High: 2.97,
  },
  {
    x: "Nov",
    y: 2.69,
    p80Low: 2.4,
    p80High: 2.98,
    p95Low: 2.24,
    p95High: 3.14,
  },
  {
    x: "Dec",
    y: 2.76,
    p80Low: 2.39,
    p80High: 3.13,
    p95Low: 2.17,
    p95High: 3.34,
  },
  {
    x: "Jan",
    y: 2.82,
    p80Low: 2.36,
    p80High: 3.28,
    p95Low: 2.1,
    p95High: 3.54,
  },
  {
    x: "Feb",
    y: 2.88,
    p80Low: 2.33,
    p80High: 3.43,
    p95Low: 2.03,
    p95High: 3.73,
  },
  {
    x: "Mar",
    y: 2.95,
    p80Low: 2.3,
    p80High: 3.6,
    p95Low: 1.96,
    p95High: 3.94,
  },
  {
    x: "Apr",
    y: 3.02,
    p80Low: 2.26,
    p80High: 3.78,
    p95Low: 1.88,
    p95High: 4.16,
  },
  {
    x: "May",
    y: 3.08,
    p80Low: 2.21,
    p80High: 3.95,
    p95Low: 1.79,
    p95High: 4.37,
  },
  {
    x: "Jun",
    y: 3.15,
    p80Low: 2.16,
    p80High: 4.14,
    p95Low: 1.7,
    p95High: 4.6,
  },
];
const bands = [
  {
    id: "p80",
    label: "80% interval",
    data: forecast.map(({ x, y, p80Low, p80High }) => ({ x, y, low: p80Low, high: p80High })),
    opacity: 0.16,
  },
  {
    id: "p95",
    label: "95% interval",
    data: forecast.map(({ x, y, p95Low, p95High }) => ({ x, y, low: p95Low, high: p95High })),
    opacity: 0.08,
  },
];
 
export default function ForecastFanChartDemo() {
  const [bandsMode, setBandsMode] = createSignal<"discrete" | "gradient">("discrete");
  const bandModes = [
    { value: "discrete", label: "Discrete" },
    { value: "gradient", label: "Gradient" },
  ];
  return (
    <div>
      <VariantToggle
        label="Band encoding"
        options={bandModes}
        value={bandsMode}
        onChange={(value) => setBandsMode(value as "discrete" | "gradient")}
      />
      <ForecastFanChart
        bandsMode={bandsMode()}
        bands={bands}
        ariaLabel="Monthly recurring revenue forecast in millions with widening 80% and 95% intervals from July 2026 through June 2027" />
    </div>
  );
}

Installation

API Reference

Import

import { useState } from "react";
import { ForecastFanChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

Description

bands

readonly ForecastFanBand[]

—

required

—

bandsMode

"discrete" | "gradient" | undefined

—

optional

Maps to `ForecastFanChartOptions.bands` in `@grassroot/chart-spec` ("discrete" | "gradient" per-band opacity treatment) — renamed here because this component's own `bands` prop already names the fan's band *data*; the two would otherwise collide on one prop key.

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

onHiddenSeriesChange

((ids: readonly string[]) => void) | undefined

—

optional

—

onActiveDatumChange

((id: string | null) => void) | undefined

—

optional

—

renderer

ChartRenderer | undefined

—

optional

—

className

string | undefined

—

optional

—

theme

import("@grassroot/theme").PartialChartTheme | undefined

—

optional

—

title

string | undefined

—

optional

—

description

string | undefined

—

optional

—

ariaLabel

string | undefined

—

optional

—

keyboardNavigation

boolean | undefined

—

optional

—

Prop: bands
Type: readonly ForecastFanBand[]
Default: —
Requirement: required
Description: —

Prop: bandsMode
Type: "discrete" | "gradient" | undefined
Default: —
Requirement: optional
Description: Maps to `ForecastFanChartOptions.bands` in `@grassroot/chart-spec` ("discrete" | "gradient" per-band opacity treatment) — renamed here because this component's own `bands` prop already names the fan's band *data*; the two would otherwise collide on one prop key.

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Events

Event	Payload
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { ref } from "vue";
import { ForecastFanChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: bands
Type: readonly ForecastFanBand[]
Default: —
Requirement: required

Prop: bandsMode
Type: "discrete" | "gradient" | undefined
Default: —
Requirement: optional

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootForecastFanChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: bands
Type: readonly ForecastFanBand[]
Default: —
Requirement: required

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Prop: bandsMode
Type: ForecastFanChartOptions["bands"]
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`

Content regions

dataSummary
default

Import

import { ForecastFanChart } from "@grassroot/charts-svelte";
import VariantToggle from "./VariantToggle.svelte";

Props

Prop

Type

Default

Requirement

bands

readonly ForecastFanBand[]

—

required

bandsMode

ForecastFanChartOptions["bands"]

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

style

string

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

—

optional

legend

boolean | LegendConfig

false

optional

Prop: bands
Type: readonly ForecastFanBand[]
Default: —
Requirement: required

Prop: bandsMode
Type: ForecastFanChartOptions["bands"]
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { createSignal } from "solid-js";
import { ForecastFanChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";

Props

Prop

Type

Default

Requirement

bands

readonly ForecastFanBand[]

—

required

bandsMode

ForecastFanChartOptions["bands"]

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

style

JSX.CSSProperties

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

"auto"

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

false

optional

legend

boolean | LegendConfig

—

optional

Prop: bands
Type: readonly ForecastFanBand[]
Default: —
Requirement: required

Prop: bandsMode
Type: ForecastFanChartOptions["bands"]
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: "auto"
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: false
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary