FunnelChart

import { useState } from "react";
import { FunnelChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
const values = [
  {
    id: "sessions",
    label: "Product sessions",
    value: 18400,
    color: "var(--accent)",
  },
  {
    id: "product-view",
    label: "Product viewed",
    value: 11200,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "bag",
    label: "Added to bag",
    value: 6400,
    color: "var(--vs-success)",
  },
  {
    id: "checkout",
    label: "Checkout started",
    value: 3180,
    color: "var(--vs-warning)",
  },
  {
    id: "address",
    label: "Address entered",
    value: 2640,
    color: "var(--vs-info)",
  },
  {
    id: "payment",
    label: "Payment submitted",
    value: 2210,
    color: "var(--accent)",
  },
  {
    id: "3ds",
    label: "3DS completed",
    value: 1980,
    color: "var(--vs-info)",
  },
  {
    id: "confirmed",
    label: "Order confirmed",
    value: 1860,
    color: "var(--vs-success)",
  },
];
 
export default function FunnelChartDemo() {
  const [links, setLinks] = useState<"off" | "on">("off");
  return (
    <div>
      <VariantToggle
        label="Flow links"
        options={[
          { value: "off" as const, label: "Off" },
          { value: "on" as const, label: "On" },
        ]}
        value={links}
        onChange={setLinks}
      />
      <FunnelChart
        data={values}
        links={links === "on"}
        ariaLabel="Checkout funnel from 18,400 product sessions to 1,860 confirmed orders, July 2026" />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { FunnelChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const links = ref<"off" | "on">("off");
const linkModes = [
  { value: "off", label: "Off" },
  { value: "on", label: "On" },
];
const values = [
  {
    id: "sessions",
    label: "Product sessions",
    value: 18400,
    color: "var(--accent)",
  },
  {
    id: "product-view",
    label: "Product viewed",
    value: 11200,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "bag",
    label: "Added to bag",
    value: 6400,
    color: "var(--vs-success)",
  },
  {
    id: "checkout",
    label: "Checkout started",
    value: 3180,
    color: "var(--vs-warning)",
  },
  {
    id: "address",
    label: "Address entered",
    value: 2640,
    color: "var(--vs-info)",
  },
  {
    id: "payment",
    label: "Payment submitted",
    value: 2210,
    color: "var(--accent)",
  },
  {
    id: "3ds",
    label: "3DS completed",
    value: 1980,
    color: "var(--vs-info)",
  },
  {
    id: "confirmed",
    label: "Order confirmed",
    value: 1860,
    color: "var(--vs-success)",
  },
];
</script>
 
<template>
  <div>
    <VariantToggle v-model="links" label="Flow links" :options="linkModes" />
    <FunnelChart
      :data="values"
      :links="links === 'on'"
      aria-label="Checkout funnel from 18,400 product sessions to 1,860 confirmed orders, July 2026" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootFunnelChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
 
@Component({
  selector: "app-funnel-chart-chart-demo",
  standalone: true,
  imports: [GrassrootFunnelChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Flow links"
      [options]="linkModes"
      [value]="links()"
      (valueChange)="setLinks($event)"
    /><grassroot-funnel-chart
    [data]="values"
    [links]="links() === 'on'"
    ariaLabel="Checkout funnel from 18,400 product sessions to 1,860 confirmed orders, July 2026"
  />`,
})
export class FunnelChartDemoComponent {
  readonly links = signal<"off" | "on">("off");
  readonly linkModes = [
    { value: "off", label: "Off" },
    { value: "on", label: "On" },
  ] as const;
  readonly values = [
    {
      id: "sessions",
      label: "Product sessions",
      value: 18400,
      color: "var(--accent)",
    },
    {
      id: "product-view",
      label: "Product viewed",
      value: 11200,
      color: "var(--vs-neutral-400)",
    },
    {
      id: "bag",
      label: "Added to bag",
      value: 6400,
      color: "var(--vs-success)",
    },
    {
      id: "checkout",
      label: "Checkout started",
      value: 3180,
      color: "var(--vs-warning)",
    },
    {
      id: "address",
      label: "Address entered",
      value: 2640,
      color: "var(--vs-info)",
    },
    {
      id: "payment",
      label: "Payment submitted",
      value: 2210,
      color: "var(--accent)",
    },
    {
      id: "3ds",
      label: "3DS completed",
      value: 1980,
      color: "var(--vs-info)",
    },
    {
      id: "confirmed",
      label: "Order confirmed",
      value: 1860,
      color: "var(--vs-success)",
    },
  ];
  setLinks(value: string): void {
    if (value === "off" || value === "on") this.links.set(value);
  }
}
 
export default FunnelChartDemoComponent;

<script lang="ts">
  import { FunnelChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let links = $state<"off" | "on">("off");
  const linkModes = [
    { value: "off", label: "Off" },
    { value: "on", label: "On" },
  ];
  const values = [
    {
      id: "sessions",
      label: "Product sessions",
      value: 18400,
      color: "var(--accent)",
    },
    {
      id: "product-view",
      label: "Product viewed",
      value: 11200,
      color: "var(--vs-neutral-400)",
    },
    {
      id: "bag",
      label: "Added to bag",
      value: 6400,
      color: "var(--vs-success)",
    },
    {
      id: "checkout",
      label: "Checkout started",
      value: 3180,
      color: "var(--vs-warning)",
    },
    {
      id: "address",
      label: "Address entered",
      value: 2640,
      color: "var(--vs-info)",
    },
    {
      id: "payment",
      label: "Payment submitted",
      value: 2210,
      color: "var(--accent)",
    },
    {
      id: "3ds",
      label: "3DS completed",
      value: 1980,
      color: "var(--vs-info)",
    },
    {
      id: "confirmed",
      label: "Order confirmed",
      value: 1860,
      color: "var(--vs-success)",
    },
  ];
</script>
 
<div>
  <VariantToggle
    label="Flow links"
    options={linkModes}
    value={links}
    onchange={(value) => (links = value as typeof links)}
  />
  <FunnelChart
    data={values}
    links={links === "on"}
    ariaLabel="Checkout funnel from 18,400 product sessions to 1,860 confirmed orders, July 2026" />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { FunnelChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
const values = [
  {
    id: "sessions",
    label: "Product sessions",
    value: 18400,
    color: "var(--accent)",
  },
  {
    id: "product-view",
    label: "Product viewed",
    value: 11200,
    color: "var(--vs-neutral-400)",
  },
  {
    id: "bag",
    label: "Added to bag",
    value: 6400,
    color: "var(--vs-success)",
  },
  {
    id: "checkout",
    label: "Checkout started",
    value: 3180,
    color: "var(--vs-warning)",
  },
  {
    id: "address",
    label: "Address entered",
    value: 2640,
    color: "var(--vs-info)",
  },
  {
    id: "payment",
    label: "Payment submitted",
    value: 2210,
    color: "var(--accent)",
  },
  {
    id: "3ds",
    label: "3DS completed",
    value: 1980,
    color: "var(--vs-info)",
  },
  {
    id: "confirmed",
    label: "Order confirmed",
    value: 1860,
    color: "var(--vs-success)",
  },
];
 
export default function FunnelChartDemo() {
  const [links, setLinks] = createSignal<"off" | "on">("off");
  const linkModes = [
    { value: "off", label: "Off" },
    { value: "on", label: "On" },
  ];
  return (
    <div>
      <VariantToggle
        label="Flow links"
        options={linkModes}
        value={links}
        onChange={(value) => setLinks(value as "off" | "on")}
      />
      <FunnelChart
        data={values}
        links={links() === "on"}
        ariaLabel="Checkout funnel from 18,400 product sessions to 1,860 confirmed orders, July 2026" />
    </div>
  );
}