WaterfallChart

import { WaterfallChart } from "@grassroot/charts-react";
 
<WaterfallChart data={[{ label: "start", value: 20 }, { label: "expansion", value: 8 }, { label: "churn", value: -5 }, { label: "net", value: 23, kind: "total" }]} />

<script setup lang="ts">
import { WaterfallChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <WaterfallChart :data='[{ label: "start", value: 20 }, { label: "expansion", value: 8 }, { label: "churn", value: -5 }, { label: "net", value: 23, kind: "total" }]' />
</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: "start", value: 20 }, { label: "expansion", value: 8 }, { label: "churn", value: -5 }, { label: "net", value: 23, kind: "total" }]' />`,
})
export class WaterfallChartDemoComponent {
 
}
 
export default WaterfallChartDemoComponent;

<script lang="ts">
  import { WaterfallChart } from "@grassroot/charts-svelte";
</script>
 
<WaterfallChart data={[{ label: "start", value: 20 }, { label: "expansion", value: 8 }, { label: "churn", value: -5 }, { label: "net", value: 23, kind: "total" }]} />

/** @jsxImportSource solid-js */
import { WaterfallChart } from "@grassroot/charts-solid";
 
export default function WaterfallChartDemo() {
  return <WaterfallChart data={[{ label: "start", value: 20 }, { label: "expansion", value: 8 }, { label: "churn", value: -5 }, { label: "net", value: 23, kind: "total" }]} />;
}