grassroot
Install
CLI previewInstall commands shown on this site are not released yet.

DocsChartsFlow & network

SankeyChart

React example follows below.
ts
import { SankeyChart } from "@grassroot/charts-react";
 
const sankeyNodes = [
  { id: "organic", label: "Organic", value: 34, group: "Acquisition", color: "var(--accent)" },
  { id: "paid", label: "Paid", value: 28, group: "Acquisition", color: "var(--vs-success)" },
  { id: "partners", label: "Partners", value: 18, group: "Acquisition", color: "var(--vs-info)" },
  { id: "trial", label: "Trial", value: 52, group: "Evaluation", color: "var(--vs-warning)" },
  { id: "sales", label: "Sales assist", value: 24, group: "Evaluation", color: "var(--vs-error)" },
  { id: "self-serve", label: "Self serve", value: 31, group: "Conversion", color: "var(--accent)" },
  { id: "enterprise", label: "Enterprise", value: 22, group: "Conversion", color: "var(--vs-success)" },
  { id: "expansion", label: "Expansion", value: 27, group: "Revenue", color: "var(--vs-info)" },
  { id: "retained", label: "Retained", value: 39, group: "Revenue", color: "var(--vs-warning)" },
  { id: "churn", label: "Churn", value: 9, group: "Revenue", color: "var(--vs-error)" },
];
const sankeyLinks = [
  { source: "organic", target: "trial", value: 22, color: "var(--accent)" },
  { source: "organic", target: "self-serve", value: 12, color: "var(--accent)" },
  { source: "paid", target: "trial", value: 18, color: "var(--vs-success)" },
  { source: "paid", target: "sales", value: 10, color: "var(--vs-success)" },
  { source: "partners", target: "sales", value: 14, color: "var(--vs-info)" },
  { source: "partners", target: "enterprise", value: 4, color: "var(--vs-info)" },
  { source: "trial", target: "self-serve", value: 25, color: "var(--vs-warning)" },
  { source: "trial", target: "enterprise", value: 13, color: "var(--vs-warning)" },
  { source: "trial", target: "churn", value: 6, color: "var(--vs-error)" },
  { source: "sales", target: "enterprise", value: 18, color: "var(--vs-error)" },
  { source: "sales", target: "churn", value: 3, color: "var(--vs-error)" },
  { source: "self-serve", target: "retained", value: 22, color: "var(--accent)" },
  { source: "self-serve", target: "expansion", value: 11, color: "var(--accent)" },
  { source: "enterprise", target: "retained", value: 17, color: "var(--vs-success)" },
  { source: "enterprise", target: "expansion", value: 16, color: "var(--vs-success)" },
];
 
 
<SankeyChart nodes={sankeyNodes} links={sankeyLinks} />
ts
<script setup lang="ts">
import { SankeyChart } from "@grassroot/charts-vue";
 
const sankeyNodes = [
  { id: "organic", label: "Organic", value: 34, group: "Acquisition", color: "var(--accent)" },
  { id: "paid", label: "Paid", value: 28, group: "Acquisition", color: "var(--vs-success)" },
  { id: "partners", label: "Partners", value: 18, group: "Acquisition", color: "var(--vs-info)" },
  { id: "trial", label: "Trial", value: 52, group: "Evaluation", color: "var(--vs-warning)" },
  { id: "sales", label: "Sales assist", value: 24, group: "Evaluation", color: "var(--vs-error)" },
  { id: "self-serve", label: "Self serve", value: 31, group: "Conversion", color: "var(--accent)" },
  { id: "enterprise", label: "Enterprise", value: 22, group: "Conversion", color: "var(--vs-success)" },
  { id: "expansion", label: "Expansion", value: 27, group: "Revenue", color: "var(--vs-info)" },
  { id: "retained", label: "Retained", value: 39, group: "Revenue", color: "var(--vs-warning)" },
  { id: "churn", label: "Churn", value: 9, group: "Revenue", color: "var(--vs-error)" },
];
const sankeyLinks = [
  { source: "organic", target: "trial", value: 22, color: "var(--accent)" },
  { source: "organic", target: "self-serve", value: 12, color: "var(--accent)" },
  { source: "paid", target: "trial", value: 18, color: "var(--vs-success)" },
  { source: "paid", target: "sales", value: 10, color: "var(--vs-success)" },
  { source: "partners", target: "sales", value: 14, color: "var(--vs-info)" },
  { source: "partners", target: "enterprise", value: 4, color: "var(--vs-info)" },
  { source: "trial", target: "self-serve", value: 25, color: "var(--vs-warning)" },
  { source: "trial", target: "enterprise", value: 13, color: "var(--vs-warning)" },
  { source: "trial", target: "churn", value: 6, color: "var(--vs-error)" },
  { source: "sales", target: "enterprise", value: 18, color: "var(--vs-error)" },
  { source: "sales", target: "churn", value: 3, color: "var(--vs-error)" },
  { source: "self-serve", target: "retained", value: 22, color: "var(--accent)" },
  { source: "self-serve", target: "expansion", value: 11, color: "var(--accent)" },
  { source: "enterprise", target: "retained", value: 17, color: "var(--vs-success)" },
  { source: "enterprise", target: "expansion", value: 16, color: "var(--vs-success)" },
];
</script>
 
<template>
  <SankeyChart :nodes='sankeyNodes' :links='sankeyLinks' />
</template>
ts
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootSankeyChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-sankey-chart-chart-demo",
  standalone: true,
  imports: [GrassrootSankeyChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-sankey-chart [nodes]='sankeyNodes' [links]='sankeyLinks' />`,
})
export class SankeyChartDemoComponent {
  readonly sankeyNodes = [
    { id: "organic", label: "Organic", value: 34, group: "Acquisition", color: "var(--accent)" },
    { id: "paid", label: "Paid", value: 28, group: "Acquisition", color: "var(--vs-success)" },
    { id: "partners", label: "Partners", value: 18, group: "Acquisition", color: "var(--vs-info)" },
    { id: "trial", label: "Trial", value: 52, group: "Evaluation", color: "var(--vs-warning)" },
    { id: "sales", label: "Sales assist", value: 24, group: "Evaluation", color: "var(--vs-error)" },
    { id: "self-serve", label: "Self serve", value: 31, group: "Conversion", color: "var(--accent)" },
    { id: "enterprise", label: "Enterprise", value: 22, group: "Conversion", color: "var(--vs-success)" },
    { id: "expansion", label: "Expansion", value: 27, group: "Revenue", color: "var(--vs-info)" },
    { id: "retained", label: "Retained", value: 39, group: "Revenue", color: "var(--vs-warning)" },
    { id: "churn", label: "Churn", value: 9, group: "Revenue", color: "var(--vs-error)" },
  ];
  readonly sankeyLinks = [
    { source: "organic", target: "trial", value: 22, color: "var(--accent)" },
    { source: "organic", target: "self-serve", value: 12, color: "var(--accent)" },
    { source: "paid", target: "trial", value: 18, color: "var(--vs-success)" },
    { source: "paid", target: "sales", value: 10, color: "var(--vs-success)" },
    { source: "partners", target: "sales", value: 14, color: "var(--vs-info)" },
    { source: "partners", target: "enterprise", value: 4, color: "var(--vs-info)" },
    { source: "trial", target: "self-serve", value: 25, color: "var(--vs-warning)" },
    { source: "trial", target: "enterprise", value: 13, color: "var(--vs-warning)" },
    { source: "trial", target: "churn", value: 6, color: "var(--vs-error)" },
    { source: "sales", target: "enterprise", value: 18, color: "var(--vs-error)" },
    { source: "sales", target: "churn", value: 3, color: "var(--vs-error)" },
    { source: "self-serve", target: "retained", value: 22, color: "var(--accent)" },
    { source: "self-serve", target: "expansion", value: 11, color: "var(--accent)" },
    { source: "enterprise", target: "retained", value: 17, color: "var(--vs-success)" },
    { source: "enterprise", target: "expansion", value: 16, color: "var(--vs-success)" },
  ];
}
 
export default SankeyChartDemoComponent;
ts
<script lang="ts">
  import { SankeyChart } from "@grassroot/charts-svelte";
 
  const sankeyNodes = [
    { id: "organic", label: "Organic", value: 34, group: "Acquisition", color: "var(--accent)" },
    { id: "paid", label: "Paid", value: 28, group: "Acquisition", color: "var(--vs-success)" },
    { id: "partners", label: "Partners", value: 18, group: "Acquisition", color: "var(--vs-info)" },
    { id: "trial", label: "Trial", value: 52, group: "Evaluation", color: "var(--vs-warning)" },
    { id: "sales", label: "Sales assist", value: 24, group: "Evaluation", color: "var(--vs-error)" },
    { id: "self-serve", label: "Self serve", value: 31, group: "Conversion", color: "var(--accent)" },
    { id: "enterprise", label: "Enterprise", value: 22, group: "Conversion", color: "var(--vs-success)" },
    { id: "expansion", label: "Expansion", value: 27, group: "Revenue", color: "var(--vs-info)" },
    { id: "retained", label: "Retained", value: 39, group: "Revenue", color: "var(--vs-warning)" },
    { id: "churn", label: "Churn", value: 9, group: "Revenue", color: "var(--vs-error)" },
  ];
  const sankeyLinks = [
    { source: "organic", target: "trial", value: 22, color: "var(--accent)" },
    { source: "organic", target: "self-serve", value: 12, color: "var(--accent)" },
    { source: "paid", target: "trial", value: 18, color: "var(--vs-success)" },
    { source: "paid", target: "sales", value: 10, color: "var(--vs-success)" },
    { source: "partners", target: "sales", value: 14, color: "var(--vs-info)" },
    { source: "partners", target: "enterprise", value: 4, color: "var(--vs-info)" },
    { source: "trial", target: "self-serve", value: 25, color: "var(--vs-warning)" },
    { source: "trial", target: "enterprise", value: 13, color: "var(--vs-warning)" },
    { source: "trial", target: "churn", value: 6, color: "var(--vs-error)" },
    { source: "sales", target: "enterprise", value: 18, color: "var(--vs-error)" },
    { source: "sales", target: "churn", value: 3, color: "var(--vs-error)" },
    { source: "self-serve", target: "retained", value: 22, color: "var(--accent)" },
    { source: "self-serve", target: "expansion", value: 11, color: "var(--accent)" },
    { source: "enterprise", target: "retained", value: 17, color: "var(--vs-success)" },
    { source: "enterprise", target: "expansion", value: 16, color: "var(--vs-success)" },
  ];
</script>
 
<SankeyChart nodes={sankeyNodes} links={sankeyLinks} />
ts
/** @jsxImportSource solid-js */
import { SankeyChart } from "@grassroot/charts-solid";
 
const sankeyNodes = [
  { id: "organic", label: "Organic", value: 34, group: "Acquisition", color: "var(--accent)" },
  { id: "paid", label: "Paid", value: 28, group: "Acquisition", color: "var(--vs-success)" },
  { id: "partners", label: "Partners", value: 18, group: "Acquisition", color: "var(--vs-info)" },
  { id: "trial", label: "Trial", value: 52, group: "Evaluation", color: "var(--vs-warning)" },
  { id: "sales", label: "Sales assist", value: 24, group: "Evaluation", color: "var(--vs-error)" },
  { id: "self-serve", label: "Self serve", value: 31, group: "Conversion", color: "var(--accent)" },
  { id: "enterprise", label: "Enterprise", value: 22, group: "Conversion", color: "var(--vs-success)" },
  { id: "expansion", label: "Expansion", value: 27, group: "Revenue", color: "var(--vs-info)" },
  { id: "retained", label: "Retained", value: 39, group: "Revenue", color: "var(--vs-warning)" },
  { id: "churn", label: "Churn", value: 9, group: "Revenue", color: "var(--vs-error)" },
];
const sankeyLinks = [
  { source: "organic", target: "trial", value: 22, color: "var(--accent)" },
  { source: "organic", target: "self-serve", value: 12, color: "var(--accent)" },
  { source: "paid", target: "trial", value: 18, color: "var(--vs-success)" },
  { source: "paid", target: "sales", value: 10, color: "var(--vs-success)" },
  { source: "partners", target: "sales", value: 14, color: "var(--vs-info)" },
  { source: "partners", target: "enterprise", value: 4, color: "var(--vs-info)" },
  { source: "trial", target: "self-serve", value: 25, color: "var(--vs-warning)" },
  { source: "trial", target: "enterprise", value: 13, color: "var(--vs-warning)" },
  { source: "trial", target: "churn", value: 6, color: "var(--vs-error)" },
  { source: "sales", target: "enterprise", value: 18, color: "var(--vs-error)" },
  { source: "sales", target: "churn", value: 3, color: "var(--vs-error)" },
  { source: "self-serve", target: "retained", value: 22, color: "var(--accent)" },
  { source: "self-serve", target: "expansion", value: 11, color: "var(--accent)" },
  { source: "enterprise", target: "retained", value: 17, color: "var(--vs-success)" },
  { source: "enterprise", target: "expansion", value: 16, color: "var(--vs-success)" },
];
 
export default function SankeyChartDemo() {
  return <SankeyChart nodes={sankeyNodes} links={sankeyLinks} />;
}

Installation

bash
pnpm dlx grassroot add chart/sankey-chart
bash
npx grassroot@latest add chart/sankey-chart
bash
yarn dlx grassroot add chart/sankey-chart
bash
bunx grassroot add chart/sankey-chart

API Reference

SankeyChartProps
PropTypeDefault
nodesrequiredreadonly NetworkNode[]—
linksrequiredreadonly NetworkLink[]—