ForecastFanChart

import { ForecastFanChart } from "@grassroot/charts-react";
 
const xy = [
  { x: "Jan", y: 14 },
  { x: "Feb", y: 21 },
  { x: "Mar", y: 18 },
  { x: "Apr", y: 27 },
];
const bands = xy.map((item, index) => ({ ...item, low: item.y - 3 - index, high: item.y + 4 + index }));
 
 
<ForecastFanChart bands={[{ label: "p80", data: bands }, { label: "p95", data: bands.map((item) => ({ ...item, low: item.low - 3, high: item.high + 3 })), opacity: 0.08 }]} />

<script setup lang="ts">
import { ForecastFanChart } from "@grassroot/charts-vue";
 
const xy = [
  { x: "Jan", y: 14 },
  { x: "Feb", y: 21 },
  { x: "Mar", y: 18 },
  { x: "Apr", y: 27 },
];
const bands = xy.map((item, index) => ({ ...item, low: item.y - 3 - index, high: item.y + 4 + index }));
</script>
 
<template>
  <ForecastFanChart :bands='[{ label: "p80", data: bands }, { label: "p95", data: bands.map((item) => ({ ...item, low: item.low - 3, high: item.high + 3 })), opacity: 0.08 }]' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootForecastFanChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-forecast-fan-chart-chart-demo",
  standalone: true,
  imports: [GrassrootForecastFanChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-forecast-fan-chart [bands]='[{ label: "p80", data: bands }, { label: "p95", data: bands.map((item) => ({ ...item, low: item.low - 3, high: item.high + 3 })), opacity: 0.08 }]' />`,
})
export class ForecastFanChartDemoComponent {
  readonly xy = [
    { x: "Jan", y: 14 },
    { x: "Feb", y: 21 },
    { x: "Mar", y: 18 },
    { x: "Apr", y: 27 },
  ];
  readonly bands = this.xy.map((item, index) => ({ ...item, low: item.y - 3 - index, high: item.y + 4 + index }));
}
 
export default ForecastFanChartDemoComponent;

<script lang="ts">
  import { ForecastFanChart } from "@grassroot/charts-svelte";
 
  const xy = [
    { x: "Jan", y: 14 },
    { x: "Feb", y: 21 },
    { x: "Mar", y: 18 },
    { x: "Apr", y: 27 },
  ];
  const bands = xy.map((item, index) => ({ ...item, low: item.y - 3 - index, high: item.y + 4 + index }));
</script>
 
<ForecastFanChart bands={[{ label: "p80", data: bands }, { label: "p95", data: bands.map((item) => ({ ...item, low: item.low - 3, high: item.high + 3 })), opacity: 0.08 }]} />

/** @jsxImportSource solid-js */
import { ForecastFanChart } from "@grassroot/charts-solid";
 
const xy = [
  { x: "Jan", y: 14 },
  { x: "Feb", y: 21 },
  { x: "Mar", y: 18 },
  { x: "Apr", y: 27 },
];
const bands = xy.map((item, index) => ({ ...item, low: item.y - 3 - index, high: item.y + 4 + index }));
 
export default function ForecastFanChartDemo() {
  return <ForecastFanChart bands={[{ label: "p80", data: bands }, { label: "p95", data: bands.map((item) => ({ ...item, low: item.low - 3, high: item.high + 3 })), opacity: 0.08 }]} />;
}