WaterfallChart

import { WaterfallChart } from "@grassroot/charts-react";
 
export default function WaterfallChartDemo() {
  return (
    <div>
      <WaterfallChart
        data={[
          {
            label: "Opening MRR",
            value: 1840,
            kind: "total",
          },
          {
            label: "New business",
            value: 186,
            kind: "increase",
          },
          {
            label: "Expansion",
            value: 94,
            kind: "increase",
          },
          {
            label: "Reactivation",
            value: 31,
            kind: "increase",
          },
          {
            label: "Services attach",
            value: 48,
            kind: "increase",
          },
          {
            label: "Contraction",
            value: -47,
            kind: "decrease",
          },
          {
            label: "Churn",
            value: -128,
            kind: "decrease",
          },
          {
            label: "Credits",
            value: -22,
            kind: "decrease",
          },
          {
            label: "Closing MRR",
            value: 2002,
            kind: "total",
          },
        ]}
        ariaLabel="Monthly recurring revenue bridge in thousands of pounds, from 1.84 million to 2.002 million, July 2026" />
    </div>
  );
}

<script setup lang="ts">
import { WaterfallChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <WaterfallChart
    :data="[
      {
        label: 'Opening MRR',
        value: 1840,
        kind: 'total',
      },
      {
        label: 'New business',
        value: 186,
        kind: 'increase',
      },
      {
        label: 'Expansion',
        value: 94,
        kind: 'increase',
      },
      {
        label: 'Reactivation',
        value: 31,
        kind: 'increase',
      },
      {
        label: 'Services attach',
        value: 48,
        kind: 'increase',
      },
      {
        label: 'Contraction',
        value: -47,
        kind: 'decrease',
      },
      {
        label: 'Churn',
        value: -128,
        kind: 'decrease',
      },
      {
        label: 'Credits',
        value: -22,
        kind: 'decrease',
      },
      {
        label: 'Closing MRR',
        value: 2002,
        kind: 'total',
      },
    ]"
    aria-label="Monthly recurring revenue bridge in thousands of pounds, from 1.84 million to 2.002 million, July 2026" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootWaterfallChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-waterfall-chart-chart-demo",
  standalone: true,
  imports: [GrassrootWaterfallChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-waterfall-chart
    [data]="[
      {
        label: 'Opening MRR',
        value: 1840,
        kind: 'total',
      },
      {
        label: 'New business',
        value: 186,
        kind: 'increase',
      },
      {
        label: 'Expansion',
        value: 94,
        kind: 'increase',
      },
      {
        label: 'Reactivation',
        value: 31,
        kind: 'increase',
      },
      {
        label: 'Services attach',
        value: 48,
        kind: 'increase',
      },
      {
        label: 'Contraction',
        value: -47,
        kind: 'decrease',
      },
      {
        label: 'Churn',
        value: -128,
        kind: 'decrease',
      },
      {
        label: 'Credits',
        value: -22,
        kind: 'decrease',
      },
      {
        label: 'Closing MRR',
        value: 2002,
        kind: 'total',
      },
    ]"
    ariaLabel="Monthly recurring revenue bridge in thousands of pounds, from 1.84 million to 2.002 million, July 2026"
  />`,
})
export class WaterfallChartDemoComponent {
}
 
export default WaterfallChartDemoComponent;

<script lang="ts">
  import { WaterfallChart } from "@grassroot/charts-svelte";
</script>
 
<WaterfallChart
  data={[
    {
      label: "Opening MRR",
      value: 1840,
      kind: "total",
    },
    {
      label: "New business",
      value: 186,
      kind: "increase",
    },
    {
      label: "Expansion",
      value: 94,
      kind: "increase",
    },
    {
      label: "Reactivation",
      value: 31,
      kind: "increase",
    },
    {
      label: "Services attach",
      value: 48,
      kind: "increase",
    },
    {
      label: "Contraction",
      value: -47,
      kind: "decrease",
    },
    {
      label: "Churn",
      value: -128,
      kind: "decrease",
    },
    {
      label: "Credits",
      value: -22,
      kind: "decrease",
    },
    {
      label: "Closing MRR",
      value: 2002,
      kind: "total",
    },
  ]}
  ariaLabel="Monthly recurring revenue bridge in thousands of pounds, from 1.84 million to 2.002 million, July 2026" />

/** @jsxImportSource solid-js */
import { WaterfallChart } from "@grassroot/charts-solid";
 
export default function WaterfallChartDemo() {
  return (
    <WaterfallChart
      data={[
        {
          label: "Opening MRR",
          value: 1840,
          kind: "total",
        },
        {
          label: "New business",
          value: 186,
          kind: "increase",
        },
        {
          label: "Expansion",
          value: 94,
          kind: "increase",
        },
        {
          label: "Reactivation",
          value: 31,
          kind: "increase",
        },
        {
          label: "Services attach",
          value: 48,
          kind: "increase",
        },
        {
          label: "Contraction",
          value: -47,
          kind: "decrease",
        },
        {
          label: "Churn",
          value: -128,
          kind: "decrease",
        },
        {
          label: "Credits",
          value: -22,
          kind: "decrease",
        },
        {
          label: "Closing MRR",
          value: 2002,
          kind: "total",
        },
      ]}
      ariaLabel="Monthly recurring revenue bridge in thousands of pounds, from 1.84 million to 2.002 million, July 2026" />
  );
}