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

DocsChartsFlow & network

NetworkChart

React example follows below.
ts
import { NetworkChart } from "@grassroot/charts-react";
 
const graphNodes = [
  { id: "web", label: "Web", value: 7, group: "Clients", color: "var(--accent)" },
  { id: "mobile", label: "Mobile", value: 5, group: "Clients", color: "var(--accent)" },
  { id: "edge", label: "Edge", value: 8, group: "Runtime", color: "var(--vs-success)" },
  { id: "api", label: "API", value: 9, group: "Runtime", color: "var(--vs-success)" },
  { id: "auth", label: "Auth", value: 5, group: "Runtime", color: "var(--vs-success)" },
  { id: "billing", label: "Billing", value: 6, group: "Services", color: "var(--vs-warning)" },
  { id: "search", label: "Search", value: 4, group: "Services", color: "var(--vs-warning)" },
  { id: "worker", label: "Worker", value: 5, group: "Services", color: "var(--vs-warning)" },
  { id: "queue", label: "Queue", value: 4, group: "Data", color: "var(--vs-info)" },
  { id: "db", label: "DB", value: 8, group: "Data", color: "var(--vs-info)" },
  { id: "warehouse", label: "Warehouse", value: 6, group: "Data", color: "var(--vs-info)" },
  { id: "alerts", label: "Alerts", value: 3, group: "Ops", color: "var(--vs-error)" },
];
const graphLinks = [
  { source: "web", target: "edge", value: 5 },
  { source: "mobile", target: "edge", value: 4 },
  { source: "edge", target: "api", value: 8 },
  { source: "api", target: "auth", value: 3 },
  { source: "api", target: "billing", value: 4 },
  { source: "api", target: "search", value: 3 },
  { source: "api", target: "worker", value: 5 },
  { source: "billing", target: "db", value: 3 },
  { source: "search", target: "db", value: 2 },
  { source: "worker", target: "queue", value: 4 },
  { source: "queue", target: "worker", value: 2 },
  { source: "worker", target: "warehouse", value: 4 },
  { source: "db", target: "warehouse", value: 5 },
  { source: "alerts", target: "api", value: 2 },
  { source: "worker", target: "alerts", value: 2 },
];
 
 
<NetworkChart nodes={graphNodes} links={graphLinks} />
ts
<script setup lang="ts">
import { NetworkChart } from "@grassroot/charts-vue";
 
const graphNodes = [
  { id: "web", label: "Web", value: 7, group: "Clients", color: "var(--accent)" },
  { id: "mobile", label: "Mobile", value: 5, group: "Clients", color: "var(--accent)" },
  { id: "edge", label: "Edge", value: 8, group: "Runtime", color: "var(--vs-success)" },
  { id: "api", label: "API", value: 9, group: "Runtime", color: "var(--vs-success)" },
  { id: "auth", label: "Auth", value: 5, group: "Runtime", color: "var(--vs-success)" },
  { id: "billing", label: "Billing", value: 6, group: "Services", color: "var(--vs-warning)" },
  { id: "search", label: "Search", value: 4, group: "Services", color: "var(--vs-warning)" },
  { id: "worker", label: "Worker", value: 5, group: "Services", color: "var(--vs-warning)" },
  { id: "queue", label: "Queue", value: 4, group: "Data", color: "var(--vs-info)" },
  { id: "db", label: "DB", value: 8, group: "Data", color: "var(--vs-info)" },
  { id: "warehouse", label: "Warehouse", value: 6, group: "Data", color: "var(--vs-info)" },
  { id: "alerts", label: "Alerts", value: 3, group: "Ops", color: "var(--vs-error)" },
];
const graphLinks = [
  { source: "web", target: "edge", value: 5 },
  { source: "mobile", target: "edge", value: 4 },
  { source: "edge", target: "api", value: 8 },
  { source: "api", target: "auth", value: 3 },
  { source: "api", target: "billing", value: 4 },
  { source: "api", target: "search", value: 3 },
  { source: "api", target: "worker", value: 5 },
  { source: "billing", target: "db", value: 3 },
  { source: "search", target: "db", value: 2 },
  { source: "worker", target: "queue", value: 4 },
  { source: "queue", target: "worker", value: 2 },
  { source: "worker", target: "warehouse", value: 4 },
  { source: "db", target: "warehouse", value: 5 },
  { source: "alerts", target: "api", value: 2 },
  { source: "worker", target: "alerts", value: 2 },
];
</script>
 
<template>
  <NetworkChart :nodes='graphNodes' :links='graphLinks' />
</template>
ts
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootNetworkChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-network-chart-chart-demo",
  standalone: true,
  imports: [GrassrootNetworkChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-network-chart [nodes]='graphNodes' [links]='graphLinks' />`,
})
export class NetworkChartDemoComponent {
  readonly graphNodes = [
    { id: "web", label: "Web", value: 7, group: "Clients", color: "var(--accent)" },
    { id: "mobile", label: "Mobile", value: 5, group: "Clients", color: "var(--accent)" },
    { id: "edge", label: "Edge", value: 8, group: "Runtime", color: "var(--vs-success)" },
    { id: "api", label: "API", value: 9, group: "Runtime", color: "var(--vs-success)" },
    { id: "auth", label: "Auth", value: 5, group: "Runtime", color: "var(--vs-success)" },
    { id: "billing", label: "Billing", value: 6, group: "Services", color: "var(--vs-warning)" },
    { id: "search", label: "Search", value: 4, group: "Services", color: "var(--vs-warning)" },
    { id: "worker", label: "Worker", value: 5, group: "Services", color: "var(--vs-warning)" },
    { id: "queue", label: "Queue", value: 4, group: "Data", color: "var(--vs-info)" },
    { id: "db", label: "DB", value: 8, group: "Data", color: "var(--vs-info)" },
    { id: "warehouse", label: "Warehouse", value: 6, group: "Data", color: "var(--vs-info)" },
    { id: "alerts", label: "Alerts", value: 3, group: "Ops", color: "var(--vs-error)" },
  ];
  readonly graphLinks = [
    { source: "web", target: "edge", value: 5 },
    { source: "mobile", target: "edge", value: 4 },
    { source: "edge", target: "api", value: 8 },
    { source: "api", target: "auth", value: 3 },
    { source: "api", target: "billing", value: 4 },
    { source: "api", target: "search", value: 3 },
    { source: "api", target: "worker", value: 5 },
    { source: "billing", target: "db", value: 3 },
    { source: "search", target: "db", value: 2 },
    { source: "worker", target: "queue", value: 4 },
    { source: "queue", target: "worker", value: 2 },
    { source: "worker", target: "warehouse", value: 4 },
    { source: "db", target: "warehouse", value: 5 },
    { source: "alerts", target: "api", value: 2 },
    { source: "worker", target: "alerts", value: 2 },
  ];
}
 
export default NetworkChartDemoComponent;
ts
<script lang="ts">
  import { NetworkChart } from "@grassroot/charts-svelte";
 
  const graphNodes = [
    { id: "web", label: "Web", value: 7, group: "Clients", color: "var(--accent)" },
    { id: "mobile", label: "Mobile", value: 5, group: "Clients", color: "var(--accent)" },
    { id: "edge", label: "Edge", value: 8, group: "Runtime", color: "var(--vs-success)" },
    { id: "api", label: "API", value: 9, group: "Runtime", color: "var(--vs-success)" },
    { id: "auth", label: "Auth", value: 5, group: "Runtime", color: "var(--vs-success)" },
    { id: "billing", label: "Billing", value: 6, group: "Services", color: "var(--vs-warning)" },
    { id: "search", label: "Search", value: 4, group: "Services", color: "var(--vs-warning)" },
    { id: "worker", label: "Worker", value: 5, group: "Services", color: "var(--vs-warning)" },
    { id: "queue", label: "Queue", value: 4, group: "Data", color: "var(--vs-info)" },
    { id: "db", label: "DB", value: 8, group: "Data", color: "var(--vs-info)" },
    { id: "warehouse", label: "Warehouse", value: 6, group: "Data", color: "var(--vs-info)" },
    { id: "alerts", label: "Alerts", value: 3, group: "Ops", color: "var(--vs-error)" },
  ];
  const graphLinks = [
    { source: "web", target: "edge", value: 5 },
    { source: "mobile", target: "edge", value: 4 },
    { source: "edge", target: "api", value: 8 },
    { source: "api", target: "auth", value: 3 },
    { source: "api", target: "billing", value: 4 },
    { source: "api", target: "search", value: 3 },
    { source: "api", target: "worker", value: 5 },
    { source: "billing", target: "db", value: 3 },
    { source: "search", target: "db", value: 2 },
    { source: "worker", target: "queue", value: 4 },
    { source: "queue", target: "worker", value: 2 },
    { source: "worker", target: "warehouse", value: 4 },
    { source: "db", target: "warehouse", value: 5 },
    { source: "alerts", target: "api", value: 2 },
    { source: "worker", target: "alerts", value: 2 },
  ];
</script>
 
<NetworkChart nodes={graphNodes} links={graphLinks} />
ts
/** @jsxImportSource solid-js */
import { NetworkChart } from "@grassroot/charts-solid";
 
const graphNodes = [
  { id: "web", label: "Web", value: 7, group: "Clients", color: "var(--accent)" },
  { id: "mobile", label: "Mobile", value: 5, group: "Clients", color: "var(--accent)" },
  { id: "edge", label: "Edge", value: 8, group: "Runtime", color: "var(--vs-success)" },
  { id: "api", label: "API", value: 9, group: "Runtime", color: "var(--vs-success)" },
  { id: "auth", label: "Auth", value: 5, group: "Runtime", color: "var(--vs-success)" },
  { id: "billing", label: "Billing", value: 6, group: "Services", color: "var(--vs-warning)" },
  { id: "search", label: "Search", value: 4, group: "Services", color: "var(--vs-warning)" },
  { id: "worker", label: "Worker", value: 5, group: "Services", color: "var(--vs-warning)" },
  { id: "queue", label: "Queue", value: 4, group: "Data", color: "var(--vs-info)" },
  { id: "db", label: "DB", value: 8, group: "Data", color: "var(--vs-info)" },
  { id: "warehouse", label: "Warehouse", value: 6, group: "Data", color: "var(--vs-info)" },
  { id: "alerts", label: "Alerts", value: 3, group: "Ops", color: "var(--vs-error)" },
];
const graphLinks = [
  { source: "web", target: "edge", value: 5 },
  { source: "mobile", target: "edge", value: 4 },
  { source: "edge", target: "api", value: 8 },
  { source: "api", target: "auth", value: 3 },
  { source: "api", target: "billing", value: 4 },
  { source: "api", target: "search", value: 3 },
  { source: "api", target: "worker", value: 5 },
  { source: "billing", target: "db", value: 3 },
  { source: "search", target: "db", value: 2 },
  { source: "worker", target: "queue", value: 4 },
  { source: "queue", target: "worker", value: 2 },
  { source: "worker", target: "warehouse", value: 4 },
  { source: "db", target: "warehouse", value: 5 },
  { source: "alerts", target: "api", value: 2 },
  { source: "worker", target: "alerts", value: 2 },
];
 
export default function NetworkChartDemo() {
  return <NetworkChart nodes={graphNodes} links={graphLinks} />;
}

Installation

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

API Reference

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