StackedAreaChart

import { useState } from "react";
const stackedAreaChartFixture = {
  id: "stacked-area-chart",
  series: [
    { name: "Live chat", values: [18, 24, 31, 42, 58, 76, 91, 108, 118, 132, 126, 114, 104, 92, 76, 54] },
    { name: "Email", values: [44, 48, 52, 58, 66, 74, 83, 91, 96, 109, 116, 110, 102, 96, 88, 72] },
    { name: "Phone", values: [22, 24, 27, 31, 38, 46, 57, 61, 63, 72, 69, 66, 61, 56, 49, 38] },
    { name: "Social", values: [6, 8, 10, 14, 17, 21, 26, 30, 33, 41, 38, 36, 32, 28, 24, 16] },
    { name: "In-app", values: [9, 11, 13, 16, 21, 28, 34, 39, 44, 48, 46, 42, 37, 31, 24, 15] },
  ],
  labels: [
    "06:00",
    "07:00",
    "08:00",
    "09:00",
    "10:00",
    "11:00",
    "12:00",
    "13:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
    "18:00",
    "19:00",
    "20:00",
    "21:00",
  ],
  ariaLabel: "Customer support conversations by channel and hour, 10 July 2026",
  tooltip: true,
  legend: true,
};
 
import { StackedAreaChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
 
const OFFSETS = [
  { value: "zero" as const, label: "Stacked" },
  { value: "wiggle" as const, label: "Streamgraph" },
];
 
export default function StackedAreaChartDemo() {
  const [offset, setOffset] = useState<(typeof OFFSETS)[number]["value"]>("zero");
  return (
    <div>
      <VariantToggle label="Baseline" options={OFFSETS} value={offset} onChange={setOffset} />
      <StackedAreaChart {...stackedAreaChartFixture} offset={offset} />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const stackedAreaChartFixture = {
  id: "stacked-area-chart",
  series: [
    { name: "Live chat", values: [18, 24, 31, 42, 58, 76, 91, 108, 118, 132, 126, 114, 104, 92, 76, 54] },
    { name: "Email", values: [44, 48, 52, 58, 66, 74, 83, 91, 96, 109, 116, 110, 102, 96, 88, 72] },
    { name: "Phone", values: [22, 24, 27, 31, 38, 46, 57, 61, 63, 72, 69, 66, 61, 56, 49, 38] },
    { name: "Social", values: [6, 8, 10, 14, 17, 21, 26, 30, 33, 41, 38, 36, 32, 28, 24, 16] },
    { name: "In-app", values: [9, 11, 13, 16, 21, 28, 34, 39, 44, 48, 46, 42, 37, 31, 24, 15] },
  ],
  labels: [
    "06:00",
    "07:00",
    "08:00",
    "09:00",
    "10:00",
    "11:00",
    "12:00",
    "13:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
    "18:00",
    "19:00",
    "20:00",
    "21:00",
  ],
  ariaLabel: "Customer support conversations by channel and hour, 10 July 2026",
  tooltip: true,
  legend: true,
};
 
import { StackedAreaChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const offset = ref<"zero" | "wiggle">("zero");
const offsets = [
  { value: "zero", label: "Stacked" },
  { value: "wiggle", label: "Streamgraph" },
];
</script>
<template>
  <div>
    <VariantToggle v-model="offset" label="Baseline" :options="offsets" /><StackedAreaChart
      v-bind="stackedAreaChartFixture"
      :offset="offset" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
const stackedAreaChartFixture = {
  id: "stacked-area-chart",
  series: [
    { name: "Live chat", values: [18, 24, 31, 42, 58, 76, 91, 108, 118, 132, 126, 114, 104, 92, 76, 54] },
    { name: "Email", values: [44, 48, 52, 58, 66, 74, 83, 91, 96, 109, 116, 110, 102, 96, 88, 72] },
    { name: "Phone", values: [22, 24, 27, 31, 38, 46, 57, 61, 63, 72, 69, 66, 61, 56, 49, 38] },
    { name: "Social", values: [6, 8, 10, 14, 17, 21, 26, 30, 33, 41, 38, 36, 32, 28, 24, 16] },
    { name: "In-app", values: [9, 11, 13, 16, 21, 28, 34, 39, 44, 48, 46, 42, 37, 31, 24, 15] },
  ],
  labels: [
    "06:00",
    "07:00",
    "08:00",
    "09:00",
    "10:00",
    "11:00",
    "12:00",
    "13:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
    "18:00",
    "19:00",
    "20:00",
    "21:00",
  ],
  ariaLabel: "Customer support conversations by channel and hour, 10 July 2026",
  tooltip: true,
  legend: true,
};
 
import { GrassrootStackedAreaChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
@Component({
  selector: "app-stacked-area-chart-chart-demo",
  standalone: true,
  imports: [GrassrootStackedAreaChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Baseline"
      [options]="offsets"
      [value]="offset()"
      (valueChange)="setOffset($event)"
    /><grassroot-stacked-area-chart
    [series]="fixture.series"
    [labels]="fixture.labels"
    [ariaLabel]="fixture.ariaLabel"
    [tooltip]="fixture.tooltip"
    [legend]="fixture.legend"
    [offset]="offset()"
  />`,
})
export class StackedAreaChartDemoComponent {
  readonly fixture = stackedAreaChartFixture;
  readonly offset = signal<"zero" | "wiggle">("zero");
  readonly offsets = [
    { value: "zero", label: "Stacked" },
    { value: "wiggle", label: "Streamgraph" },
  ] as const;
  setOffset(value: string): void {
    if (value === "zero" || value === "wiggle") this.offset.set(value);
  }
}
export default StackedAreaChartDemoComponent;

<script lang="ts">
  const stackedAreaChartFixture = {
    id: "stacked-area-chart",
    series: [
      { name: "Live chat", values: [18, 24, 31, 42, 58, 76, 91, 108, 118, 132, 126, 114, 104, 92, 76, 54] },
      { name: "Email", values: [44, 48, 52, 58, 66, 74, 83, 91, 96, 109, 116, 110, 102, 96, 88, 72] },
      { name: "Phone", values: [22, 24, 27, 31, 38, 46, 57, 61, 63, 72, 69, 66, 61, 56, 49, 38] },
      { name: "Social", values: [6, 8, 10, 14, 17, 21, 26, 30, 33, 41, 38, 36, 32, 28, 24, 16] },
      { name: "In-app", values: [9, 11, 13, 16, 21, 28, 34, 39, 44, 48, 46, 42, 37, 31, 24, 15] },
    ],
    labels: [
      "06:00",
      "07:00",
      "08:00",
      "09:00",
      "10:00",
      "11:00",
      "12:00",
      "13:00",
      "14:00",
      "15:00",
      "16:00",
      "17:00",
      "18:00",
      "19:00",
      "20:00",
      "21:00",
    ],
    ariaLabel: "Customer support conversations by channel and hour, 10 July 2026",
    tooltip: true,
    legend: true,
  };
 
  import { StackedAreaChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let offset = $state<"zero" | "wiggle">("zero");
  const offsets = [
    { value: "zero", label: "Stacked" },
    { value: "wiggle", label: "Streamgraph" },
  ];
</script>
 
<div>
  <VariantToggle
    label="Baseline"
    options={offsets}
    value={offset}
    onchange={(value) => (offset = value as typeof offset)}
  />
  <StackedAreaChart {...stackedAreaChartFixture} {offset} />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
const stackedAreaChartFixture = {
  id: "stacked-area-chart",
  series: [
    { name: "Live chat", values: [18, 24, 31, 42, 58, 76, 91, 108, 118, 132, 126, 114, 104, 92, 76, 54] },
    { name: "Email", values: [44, 48, 52, 58, 66, 74, 83, 91, 96, 109, 116, 110, 102, 96, 88, 72] },
    { name: "Phone", values: [22, 24, 27, 31, 38, 46, 57, 61, 63, 72, 69, 66, 61, 56, 49, 38] },
    { name: "Social", values: [6, 8, 10, 14, 17, 21, 26, 30, 33, 41, 38, 36, 32, 28, 24, 16] },
    { name: "In-app", values: [9, 11, 13, 16, 21, 28, 34, 39, 44, 48, 46, 42, 37, 31, 24, 15] },
  ],
  labels: [
    "06:00",
    "07:00",
    "08:00",
    "09:00",
    "10:00",
    "11:00",
    "12:00",
    "13:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
    "18:00",
    "19:00",
    "20:00",
    "21:00",
  ],
  ariaLabel: "Customer support conversations by channel and hour, 10 July 2026",
  tooltip: true,
  legend: true,
};
 
import { StackedAreaChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
export default function StackedAreaChartDemo() {
  const [offset, setOffset] = createSignal<"zero" | "wiggle">("zero");
  const offsets = [
    { value: "zero", label: "Stacked" },
    { value: "wiggle", label: "Streamgraph" },
  ];
  return (
    <div>
      <VariantToggle
        label="Baseline"
        options={offsets}
        value={offset}
        onChange={(value) => setOffset(value as "zero" | "wiggle")}
      />
      <StackedAreaChart {...stackedAreaChartFixture} offset={offset()} />
    </div>
  );
}