StackedBarChart

const stackedBarChartFixture = {
  id: "stacked-bar-chart",
  labels: [
    "Q1 2024",
    "Q2 2024",
    "Q3 2024",
    "Q4 2024",
    "Q1 2025",
    "Q2 2025",
    "Q3 2025",
    "Q4 2025",
    "Q1 2026",
    "Q2 2026",
  ],
  series: [{ name: "New business (£m)" }, { name: "Renewals (£m)" }, { name: "Expansion (£m)" }, { name: "Services (£m)" }],
  values: [
    [1.8, 2.4, 0.4, 0.3],
    [2.0, 2.6, 0.5, 0.4],
    [2.1, 2.8, 0.5, 0.4],
    [2.3, 2.9, 0.6, 0.5],
    [2.4, 3.1, 0.7, 0.5],
    [2.8, 3.3, 0.9, 0.6],
    [3.2, 3.5, 1.0, 0.7],
    [3.9, 3.8, 1.2, 0.8],
    [3.6, 4.1, 1.4, 0.9],
    [4.3, 4.4, 1.6, 1.1],
  ],
  ariaLabel: "Quarterly recurring revenue from new business, renewals, expansion, and services in millions of pounds",
  tooltip: true,
  legend: true,
};
 
import { StackedBarChart } from "@grassroot/charts-react";
 
export default function StackedBarChartDemo() {
  return (
    <div>
      <StackedBarChart {...stackedBarChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const stackedBarChartFixture = {
  id: "stacked-bar-chart",
  labels: [
    "Q1 2024",
    "Q2 2024",
    "Q3 2024",
    "Q4 2024",
    "Q1 2025",
    "Q2 2025",
    "Q3 2025",
    "Q4 2025",
    "Q1 2026",
    "Q2 2026",
  ],
  series: [{ name: "New business (£m)" }, { name: "Renewals (£m)" }, { name: "Expansion (£m)" }, { name: "Services (£m)" }],
  values: [
    [1.8, 2.4, 0.4, 0.3],
    [2.0, 2.6, 0.5, 0.4],
    [2.1, 2.8, 0.5, 0.4],
    [2.3, 2.9, 0.6, 0.5],
    [2.4, 3.1, 0.7, 0.5],
    [2.8, 3.3, 0.9, 0.6],
    [3.2, 3.5, 1.0, 0.7],
    [3.9, 3.8, 1.2, 0.8],
    [3.6, 4.1, 1.4, 0.9],
    [4.3, 4.4, 1.6, 1.1],
  ],
  ariaLabel: "Quarterly recurring revenue from new business, renewals, expansion, and services in millions of pounds",
  tooltip: true,
  legend: true,
};
 
import { StackedBarChart } from "@grassroot/charts-vue";
</script>
<template><StackedBarChart v-bind="stackedBarChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const stackedBarChartFixture = {
  id: "stacked-bar-chart",
  labels: [
    "Q1 2024",
    "Q2 2024",
    "Q3 2024",
    "Q4 2024",
    "Q1 2025",
    "Q2 2025",
    "Q3 2025",
    "Q4 2025",
    "Q1 2026",
    "Q2 2026",
  ],
  series: [{ name: "New business (£m)" }, { name: "Renewals (£m)" }, { name: "Expansion (£m)" }, { name: "Services (£m)" }],
  values: [
    [1.8, 2.4, 0.4, 0.3],
    [2.0, 2.6, 0.5, 0.4],
    [2.1, 2.8, 0.5, 0.4],
    [2.3, 2.9, 0.6, 0.5],
    [2.4, 3.1, 0.7, 0.5],
    [2.8, 3.3, 0.9, 0.6],
    [3.2, 3.5, 1.0, 0.7],
    [3.9, 3.8, 1.2, 0.8],
    [3.6, 4.1, 1.4, 0.9],
    [4.3, 4.4, 1.6, 1.1],
  ],
  ariaLabel: "Quarterly recurring revenue from new business, renewals, expansion, and services in millions of pounds",
  tooltip: true,
  legend: true,
};
 
import { GrassrootStackedBarChart } from "@grassroot/charts-angular";
@Component({
  selector: "app-stacked-bar-chart-chart-demo",
  standalone: true,
  imports: [GrassrootStackedBarChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-stacked-bar-chart
    [labels]="fixture.labels"
    [series]="fixture.series"
    [values]="fixture.values"
    [ariaLabel]="fixture.ariaLabel"
    [tooltip]="fixture.tooltip"
    [legend]="fixture.legend"
  />`,
})
export class StackedBarChartDemoComponent {
  readonly fixture = stackedBarChartFixture;
}
export default StackedBarChartDemoComponent;

<script lang="ts">
  const stackedBarChartFixture = {
    id: "stacked-bar-chart",
    labels: [
      "Q1 2024",
      "Q2 2024",
      "Q3 2024",
      "Q4 2024",
      "Q1 2025",
      "Q2 2025",
      "Q3 2025",
      "Q4 2025",
      "Q1 2026",
      "Q2 2026",
    ],
    series: [{ name: "New business (£m)" }, { name: "Renewals (£m)" }, { name: "Expansion (£m)" }, { name: "Services (£m)" }],
    values: [
      [1.8, 2.4, 0.4, 0.3],
      [2.0, 2.6, 0.5, 0.4],
      [2.1, 2.8, 0.5, 0.4],
      [2.3, 2.9, 0.6, 0.5],
      [2.4, 3.1, 0.7, 0.5],
      [2.8, 3.3, 0.9, 0.6],
      [3.2, 3.5, 1.0, 0.7],
      [3.9, 3.8, 1.2, 0.8],
      [3.6, 4.1, 1.4, 0.9],
      [4.3, 4.4, 1.6, 1.1],
    ],
    ariaLabel: "Quarterly recurring revenue from new business, renewals, expansion, and services in millions of pounds",
    tooltip: true,
    legend: true,
  };
 
  import { StackedBarChart } from "@grassroot/charts-svelte";
</script>
 
<StackedBarChart {...stackedBarChartFixture} />

/** @jsxImportSource solid-js */
const stackedBarChartFixture = {
  id: "stacked-bar-chart",
  labels: [
    "Q1 2024",
    "Q2 2024",
    "Q3 2024",
    "Q4 2024",
    "Q1 2025",
    "Q2 2025",
    "Q3 2025",
    "Q4 2025",
    "Q1 2026",
    "Q2 2026",
  ],
  series: [{ name: "New business (£m)" }, { name: "Renewals (£m)" }, { name: "Expansion (£m)" }, { name: "Services (£m)" }],
  values: [
    [1.8, 2.4, 0.4, 0.3],
    [2.0, 2.6, 0.5, 0.4],
    [2.1, 2.8, 0.5, 0.4],
    [2.3, 2.9, 0.6, 0.5],
    [2.4, 3.1, 0.7, 0.5],
    [2.8, 3.3, 0.9, 0.6],
    [3.2, 3.5, 1.0, 0.7],
    [3.9, 3.8, 1.2, 0.8],
    [3.6, 4.1, 1.4, 0.9],
    [4.3, 4.4, 1.6, 1.1],
  ],
  ariaLabel: "Quarterly recurring revenue from new business, renewals, expansion, and services in millions of pounds",
  tooltip: true,
  legend: true,
};
 
import { StackedBarChart } from "@grassroot/charts-solid";
export default function StackedBarChartDemo() {
  return <StackedBarChart {...stackedBarChartFixture} />;
}