Docs Charts Flow & network

ForceGraphChart

import { ForceGraphChart } from "@grassroot/charts-react";
const graphNodes = [
  {
    id: "web",
    label: "Web storefront",
    value: 8,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "mobile",
    label: "Mobile app",
    value: 6,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "pos",
    label: "Store POS",
    value: 4,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "partner",
    label: "Partner portal",
    value: 3,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "gateway",
    label: "API gateway",
    value: 14,
    group: "Edge",
    color: "var(--vs-success)",
  },
  {
    id: "cdn",
    label: "CDN",
    value: 7,
    group: "Edge",
    color: "var(--vs-success)",
  },
  {
    id: "identity",
    label: "Identity",
    value: 6,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "catalog",
    label: "Catalog",
    value: 10,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "checkout",
    label: "Checkout",
    value: 9,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "search",
    label: "Search",
    value: 8,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "inventory",
    label: "Inventory",
    value: 7,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "payments",
    label: "Payments",
    value: 5,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "orders",
    label: "Orders",
    value: 8,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "events",
    label: "Event bus",
    value: 6,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "notifications",
    label: "Notifications",
    value: 4,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "orders-db",
    label: "Orders database",
    value: 10,
    group: "Data systems",
    color: "var(--vs-error)",
  },
  {
    id: "catalog-db",
    label: "Catalog database",
    value: 8,
    group: "Data systems",
    color: "var(--vs-error)",
  },
  {
    id: "analytics",
    label: "Analytics",
    value: 5,
    group: "Data systems",
    color: "var(--vs-error)",
  },
];
const graphLinks = [
  {
    source: "web",
    target: "gateway",
    value: 50,
  },
  {
    source: "mobile",
    target: "gateway",
    value: 34,
  },
  {
    source: "pos",
    target: "gateway",
    value: 18,
  },
  {
    source: "partner",
    target: "gateway",
    value: 12,
  },
  {
    source: "web",
    target: "cdn",
    value: 22,
  },
  {
    source: "mobile",
    target: "cdn",
    value: 16,
  },
  {
    source: "gateway",
    target: "identity",
    value: 28,
  },
  {
    source: "gateway",
    target: "catalog",
    value: 42,
  },
  {
    source: "gateway",
    target: "checkout",
    value: 22,
  },
  {
    source: "gateway",
    target: "search",
    value: 31,
  },
  {
    source: "cdn",
    target: "catalog",
    value: 14,
  },
  {
    source: "checkout",
    target: "identity",
    value: 8,
  },
  {
    source: "checkout",
    target: "catalog",
    value: 13,
  },
  {
    source: "checkout",
    target: "inventory",
    value: 16,
  },
  {
    source: "checkout",
    target: "payments",
    value: 12,
  },
  {
    source: "checkout",
    target: "orders",
    value: 14,
  },
  {
    source: "checkout",
    target: "events",
    value: 13,
  },
  {
    source: "catalog",
    target: "inventory",
    value: 31,
  },
  {
    source: "catalog",
    target: "catalog-db",
    value: 24,
  },
  {
    source: "catalog",
    target: "search",
    value: 19,
  },
  {
    source: "search",
    target: "catalog-db",
    value: 11,
  },
  {
    source: "orders",
    target: "orders-db",
    value: 14,
  },
  {
    source: "orders",
    target: "notifications",
    value: 9,
  },
  {
    source: "orders",
    target: "events",
    value: 8,
  },
  {
    source: "payments",
    target: "events",
    value: 9,
  },
  {
    source: "payments",
    target: "notifications",
    value: 6,
  },
  {
    source: "inventory",
    target: "events",
    value: 5,
  },
  {
    source: "inventory",
    target: "orders",
    value: 7,
  },
  {
    source: "events",
    target: "analytics",
    value: 27,
  },
  {
    source: "events",
    target: "notifications",
    value: 8,
  },
  {
    source: "notifications",
    target: "analytics",
    value: 6,
  },
];
 
export default function ForceGraphChartDemo() {
  return (
    <div>
      <ForceGraphChart
        nodes={graphNodes}
        links={graphLinks}
        forceIterations={55}
        ariaLabel="Commerce platform service network with eighteen services and thirty-one weighted request paths" />
    </div>
  );
}

<script setup lang="ts">
import { ForceGraphChart } from "@grassroot/charts-vue";
const graphNodes = [
  {
    id: "web",
    label: "Web storefront",
    value: 8,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "mobile",
    label: "Mobile app",
    value: 6,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "pos",
    label: "Store POS",
    value: 4,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "partner",
    label: "Partner portal",
    value: 3,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "gateway",
    label: "API gateway",
    value: 14,
    group: "Edge",
    color: "var(--vs-success)",
  },
  {
    id: "cdn",
    label: "CDN",
    value: 7,
    group: "Edge",
    color: "var(--vs-success)",
  },
  {
    id: "identity",
    label: "Identity",
    value: 6,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "catalog",
    label: "Catalog",
    value: 10,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "checkout",
    label: "Checkout",
    value: 9,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "search",
    label: "Search",
    value: 8,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "inventory",
    label: "Inventory",
    value: 7,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "payments",
    label: "Payments",
    value: 5,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "orders",
    label: "Orders",
    value: 8,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "events",
    label: "Event bus",
    value: 6,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "notifications",
    label: "Notifications",
    value: 4,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "orders-db",
    label: "Orders database",
    value: 10,
    group: "Data systems",
    color: "var(--vs-error)",
  },
  {
    id: "catalog-db",
    label: "Catalog database",
    value: 8,
    group: "Data systems",
    color: "var(--vs-error)",
  },
  {
    id: "analytics",
    label: "Analytics",
    value: 5,
    group: "Data systems",
    color: "var(--vs-error)",
  },
];
const graphLinks = [
  {
    source: "web",
    target: "gateway",
    value: 50,
  },
  {
    source: "mobile",
    target: "gateway",
    value: 34,
  },
  {
    source: "pos",
    target: "gateway",
    value: 18,
  },
  {
    source: "partner",
    target: "gateway",
    value: 12,
  },
  {
    source: "web",
    target: "cdn",
    value: 22,
  },
  {
    source: "mobile",
    target: "cdn",
    value: 16,
  },
  {
    source: "gateway",
    target: "identity",
    value: 28,
  },
  {
    source: "gateway",
    target: "catalog",
    value: 42,
  },
  {
    source: "gateway",
    target: "checkout",
    value: 22,
  },
  {
    source: "gateway",
    target: "search",
    value: 31,
  },
  {
    source: "cdn",
    target: "catalog",
    value: 14,
  },
  {
    source: "checkout",
    target: "identity",
    value: 8,
  },
  {
    source: "checkout",
    target: "catalog",
    value: 13,
  },
  {
    source: "checkout",
    target: "inventory",
    value: 16,
  },
  {
    source: "checkout",
    target: "payments",
    value: 12,
  },
  {
    source: "checkout",
    target: "orders",
    value: 14,
  },
  {
    source: "checkout",
    target: "events",
    value: 13,
  },
  {
    source: "catalog",
    target: "inventory",
    value: 31,
  },
  {
    source: "catalog",
    target: "catalog-db",
    value: 24,
  },
  {
    source: "catalog",
    target: "search",
    value: 19,
  },
  {
    source: "search",
    target: "catalog-db",
    value: 11,
  },
  {
    source: "orders",
    target: "orders-db",
    value: 14,
  },
  {
    source: "orders",
    target: "notifications",
    value: 9,
  },
  {
    source: "orders",
    target: "events",
    value: 8,
  },
  {
    source: "payments",
    target: "events",
    value: 9,
  },
  {
    source: "payments",
    target: "notifications",
    value: 6,
  },
  {
    source: "inventory",
    target: "events",
    value: 5,
  },
  {
    source: "inventory",
    target: "orders",
    value: 7,
  },
  {
    source: "events",
    target: "analytics",
    value: 27,
  },
  {
    source: "events",
    target: "notifications",
    value: 8,
  },
  {
    source: "notifications",
    target: "analytics",
    value: 6,
  },
];
</script>
 
<template>
  <ForceGraphChart
    :nodes="graphNodes"
    :links="graphLinks"
    :forceIterations="55"
    aria-label="Commerce platform service network with eighteen services and thirty-one weighted request paths" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootForceGraphChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-force-graph-chart-chart-demo",
  standalone: true,
  imports: [GrassrootForceGraphChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-force-graph-chart
    [nodes]="graphNodes"
    [links]="graphLinks"
    [forceIterations]="55"
    ariaLabel="Commerce platform service network with eighteen services and thirty-one weighted request paths"
  />`,
})
export class ForceGraphChartDemoComponent {
  readonly graphNodes = [
    {
      id: "web",
      label: "Web storefront",
      value: 8,
      group: "Channels",
      color: "var(--accent)",
    },
    {
      id: "mobile",
      label: "Mobile app",
      value: 6,
      group: "Channels",
      color: "var(--accent)",
    },
    {
      id: "pos",
      label: "Store POS",
      value: 4,
      group: "Channels",
      color: "var(--accent)",
    },
    {
      id: "partner",
      label: "Partner portal",
      value: 3,
      group: "Channels",
      color: "var(--accent)",
    },
    {
      id: "gateway",
      label: "API gateway",
      value: 14,
      group: "Edge",
      color: "var(--vs-success)",
    },
    {
      id: "cdn",
      label: "CDN",
      value: 7,
      group: "Edge",
      color: "var(--vs-success)",
    },
    {
      id: "identity",
      label: "Identity",
      value: 6,
      group: "Core services",
      color: "var(--vs-warning)",
    },
    {
      id: "catalog",
      label: "Catalog",
      value: 10,
      group: "Core services",
      color: "var(--vs-warning)",
    },
    {
      id: "checkout",
      label: "Checkout",
      value: 9,
      group: "Core services",
      color: "var(--vs-warning)",
    },
    {
      id: "search",
      label: "Search",
      value: 8,
      group: "Core services",
      color: "var(--vs-warning)",
    },
    {
      id: "inventory",
      label: "Inventory",
      value: 7,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "payments",
      label: "Payments",
      value: 5,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "orders",
      label: "Orders",
      value: 8,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "events",
      label: "Event bus",
      value: 6,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "notifications",
      label: "Notifications",
      value: 4,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "orders-db",
      label: "Orders database",
      value: 10,
      group: "Data systems",
      color: "var(--vs-error)",
    },
    {
      id: "catalog-db",
      label: "Catalog database",
      value: 8,
      group: "Data systems",
      color: "var(--vs-error)",
    },
    {
      id: "analytics",
      label: "Analytics",
      value: 5,
      group: "Data systems",
      color: "var(--vs-error)",
    },
  ];
  readonly graphLinks = [
    {
      source: "web",
      target: "gateway",
      value: 50,
    },
    {
      source: "mobile",
      target: "gateway",
      value: 34,
    },
    {
      source: "pos",
      target: "gateway",
      value: 18,
    },
    {
      source: "partner",
      target: "gateway",
      value: 12,
    },
    {
      source: "web",
      target: "cdn",
      value: 22,
    },
    {
      source: "mobile",
      target: "cdn",
      value: 16,
    },
    {
      source: "gateway",
      target: "identity",
      value: 28,
    },
    {
      source: "gateway",
      target: "catalog",
      value: 42,
    },
    {
      source: "gateway",
      target: "checkout",
      value: 22,
    },
    {
      source: "gateway",
      target: "search",
      value: 31,
    },
    {
      source: "cdn",
      target: "catalog",
      value: 14,
    },
    {
      source: "checkout",
      target: "identity",
      value: 8,
    },
    {
      source: "checkout",
      target: "catalog",
      value: 13,
    },
    {
      source: "checkout",
      target: "inventory",
      value: 16,
    },
    {
      source: "checkout",
      target: "payments",
      value: 12,
    },
    {
      source: "checkout",
      target: "orders",
      value: 14,
    },
    {
      source: "checkout",
      target: "events",
      value: 13,
    },
    {
      source: "catalog",
      target: "inventory",
      value: 31,
    },
    {
      source: "catalog",
      target: "catalog-db",
      value: 24,
    },
    {
      source: "catalog",
      target: "search",
      value: 19,
    },
    {
      source: "search",
      target: "catalog-db",
      value: 11,
    },
    {
      source: "orders",
      target: "orders-db",
      value: 14,
    },
    {
      source: "orders",
      target: "notifications",
      value: 9,
    },
    {
      source: "orders",
      target: "events",
      value: 8,
    },
    {
      source: "payments",
      target: "events",
      value: 9,
    },
    {
      source: "payments",
      target: "notifications",
      value: 6,
    },
    {
      source: "inventory",
      target: "events",
      value: 5,
    },
    {
      source: "inventory",
      target: "orders",
      value: 7,
    },
    {
      source: "events",
      target: "analytics",
      value: 27,
    },
    {
      source: "events",
      target: "notifications",
      value: 8,
    },
    {
      source: "notifications",
      target: "analytics",
      value: 6,
    },
  ];
}
 
export default ForceGraphChartDemoComponent;

<script lang="ts">
  import { ForceGraphChart } from "@grassroot/charts-svelte";
  const graphNodes = [
    {
      id: "web",
      label: "Web storefront",
      value: 8,
      group: "Channels",
      color: "var(--accent)",
    },
    {
      id: "mobile",
      label: "Mobile app",
      value: 6,
      group: "Channels",
      color: "var(--accent)",
    },
    {
      id: "pos",
      label: "Store POS",
      value: 4,
      group: "Channels",
      color: "var(--accent)",
    },
    {
      id: "partner",
      label: "Partner portal",
      value: 3,
      group: "Channels",
      color: "var(--accent)",
    },
    {
      id: "gateway",
      label: "API gateway",
      value: 14,
      group: "Edge",
      color: "var(--vs-success)",
    },
    {
      id: "cdn",
      label: "CDN",
      value: 7,
      group: "Edge",
      color: "var(--vs-success)",
    },
    {
      id: "identity",
      label: "Identity",
      value: 6,
      group: "Core services",
      color: "var(--vs-warning)",
    },
    {
      id: "catalog",
      label: "Catalog",
      value: 10,
      group: "Core services",
      color: "var(--vs-warning)",
    },
    {
      id: "checkout",
      label: "Checkout",
      value: 9,
      group: "Core services",
      color: "var(--vs-warning)",
    },
    {
      id: "search",
      label: "Search",
      value: 8,
      group: "Core services",
      color: "var(--vs-warning)",
    },
    {
      id: "inventory",
      label: "Inventory",
      value: 7,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "payments",
      label: "Payments",
      value: 5,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "orders",
      label: "Orders",
      value: 8,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "events",
      label: "Event bus",
      value: 6,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "notifications",
      label: "Notifications",
      value: 4,
      group: "Platform services",
      color: "var(--vs-info)",
    },
    {
      id: "orders-db",
      label: "Orders database",
      value: 10,
      group: "Data systems",
      color: "var(--vs-error)",
    },
    {
      id: "catalog-db",
      label: "Catalog database",
      value: 8,
      group: "Data systems",
      color: "var(--vs-error)",
    },
    {
      id: "analytics",
      label: "Analytics",
      value: 5,
      group: "Data systems",
      color: "var(--vs-error)",
    },
  ];
  const graphLinks = [
    {
      source: "web",
      target: "gateway",
      value: 50,
    },
    {
      source: "mobile",
      target: "gateway",
      value: 34,
    },
    {
      source: "pos",
      target: "gateway",
      value: 18,
    },
    {
      source: "partner",
      target: "gateway",
      value: 12,
    },
    {
      source: "web",
      target: "cdn",
      value: 22,
    },
    {
      source: "mobile",
      target: "cdn",
      value: 16,
    },
    {
      source: "gateway",
      target: "identity",
      value: 28,
    },
    {
      source: "gateway",
      target: "catalog",
      value: 42,
    },
    {
      source: "gateway",
      target: "checkout",
      value: 22,
    },
    {
      source: "gateway",
      target: "search",
      value: 31,
    },
    {
      source: "cdn",
      target: "catalog",
      value: 14,
    },
    {
      source: "checkout",
      target: "identity",
      value: 8,
    },
    {
      source: "checkout",
      target: "catalog",
      value: 13,
    },
    {
      source: "checkout",
      target: "inventory",
      value: 16,
    },
    {
      source: "checkout",
      target: "payments",
      value: 12,
    },
    {
      source: "checkout",
      target: "orders",
      value: 14,
    },
    {
      source: "checkout",
      target: "events",
      value: 13,
    },
    {
      source: "catalog",
      target: "inventory",
      value: 31,
    },
    {
      source: "catalog",
      target: "catalog-db",
      value: 24,
    },
    {
      source: "catalog",
      target: "search",
      value: 19,
    },
    {
      source: "search",
      target: "catalog-db",
      value: 11,
    },
    {
      source: "orders",
      target: "orders-db",
      value: 14,
    },
    {
      source: "orders",
      target: "notifications",
      value: 9,
    },
    {
      source: "orders",
      target: "events",
      value: 8,
    },
    {
      source: "payments",
      target: "events",
      value: 9,
    },
    {
      source: "payments",
      target: "notifications",
      value: 6,
    },
    {
      source: "inventory",
      target: "events",
      value: 5,
    },
    {
      source: "inventory",
      target: "orders",
      value: 7,
    },
    {
      source: "events",
      target: "analytics",
      value: 27,
    },
    {
      source: "events",
      target: "notifications",
      value: 8,
    },
    {
      source: "notifications",
      target: "analytics",
      value: 6,
    },
  ];
</script>
 
<ForceGraphChart
  nodes={graphNodes}
  links={graphLinks}
  forceIterations={55}
  ariaLabel="Commerce platform service network with eighteen services and thirty-one weighted request paths" />

/** @jsxImportSource solid-js */
import { ForceGraphChart } from "@grassroot/charts-solid";
const graphNodes = [
  {
    id: "web",
    label: "Web storefront",
    value: 8,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "mobile",
    label: "Mobile app",
    value: 6,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "pos",
    label: "Store POS",
    value: 4,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "partner",
    label: "Partner portal",
    value: 3,
    group: "Channels",
    color: "var(--accent)",
  },
  {
    id: "gateway",
    label: "API gateway",
    value: 14,
    group: "Edge",
    color: "var(--vs-success)",
  },
  {
    id: "cdn",
    label: "CDN",
    value: 7,
    group: "Edge",
    color: "var(--vs-success)",
  },
  {
    id: "identity",
    label: "Identity",
    value: 6,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "catalog",
    label: "Catalog",
    value: 10,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "checkout",
    label: "Checkout",
    value: 9,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "search",
    label: "Search",
    value: 8,
    group: "Core services",
    color: "var(--vs-warning)",
  },
  {
    id: "inventory",
    label: "Inventory",
    value: 7,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "payments",
    label: "Payments",
    value: 5,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "orders",
    label: "Orders",
    value: 8,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "events",
    label: "Event bus",
    value: 6,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "notifications",
    label: "Notifications",
    value: 4,
    group: "Platform services",
    color: "var(--vs-info)",
  },
  {
    id: "orders-db",
    label: "Orders database",
    value: 10,
    group: "Data systems",
    color: "var(--vs-error)",
  },
  {
    id: "catalog-db",
    label: "Catalog database",
    value: 8,
    group: "Data systems",
    color: "var(--vs-error)",
  },
  {
    id: "analytics",
    label: "Analytics",
    value: 5,
    group: "Data systems",
    color: "var(--vs-error)",
  },
];
const graphLinks = [
  {
    source: "web",
    target: "gateway",
    value: 50,
  },
  {
    source: "mobile",
    target: "gateway",
    value: 34,
  },
  {
    source: "pos",
    target: "gateway",
    value: 18,
  },
  {
    source: "partner",
    target: "gateway",
    value: 12,
  },
  {
    source: "web",
    target: "cdn",
    value: 22,
  },
  {
    source: "mobile",
    target: "cdn",
    value: 16,
  },
  {
    source: "gateway",
    target: "identity",
    value: 28,
  },
  {
    source: "gateway",
    target: "catalog",
    value: 42,
  },
  {
    source: "gateway",
    target: "checkout",
    value: 22,
  },
  {
    source: "gateway",
    target: "search",
    value: 31,
  },
  {
    source: "cdn",
    target: "catalog",
    value: 14,
  },
  {
    source: "checkout",
    target: "identity",
    value: 8,
  },
  {
    source: "checkout",
    target: "catalog",
    value: 13,
  },
  {
    source: "checkout",
    target: "inventory",
    value: 16,
  },
  {
    source: "checkout",
    target: "payments",
    value: 12,
  },
  {
    source: "checkout",
    target: "orders",
    value: 14,
  },
  {
    source: "checkout",
    target: "events",
    value: 13,
  },
  {
    source: "catalog",
    target: "inventory",
    value: 31,
  },
  {
    source: "catalog",
    target: "catalog-db",
    value: 24,
  },
  {
    source: "catalog",
    target: "search",
    value: 19,
  },
  {
    source: "search",
    target: "catalog-db",
    value: 11,
  },
  {
    source: "orders",
    target: "orders-db",
    value: 14,
  },
  {
    source: "orders",
    target: "notifications",
    value: 9,
  },
  {
    source: "orders",
    target: "events",
    value: 8,
  },
  {
    source: "payments",
    target: "events",
    value: 9,
  },
  {
    source: "payments",
    target: "notifications",
    value: 6,
  },
  {
    source: "inventory",
    target: "events",
    value: 5,
  },
  {
    source: "inventory",
    target: "orders",
    value: 7,
  },
  {
    source: "events",
    target: "analytics",
    value: 27,
  },
  {
    source: "events",
    target: "notifications",
    value: 8,
  },
  {
    source: "notifications",
    target: "analytics",
    value: 6,
  },
];
 
export default function ForceGraphChartDemo() {
  return (
    <ForceGraphChart
      nodes={graphNodes}
      links={graphLinks}
      forceIterations={55}
      ariaLabel="Commerce platform service network with eighteen services and thirty-one weighted request paths" />
  );
}

Installation

API Reference

Import

import { ForceGraphChart } from "@grassroot/charts-react";

Props

Prop

Type

Default

Requirement

Description

nodes

readonly NetworkNode[]

—

required

—

links

readonly NetworkLink[]

—

required

—

forceSeed

number | undefined

—

optional

—

forceIterations

number | undefined

—

optional

—

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

onHiddenSeriesChange

((ids: readonly string[]) => void) | undefined

—

optional

—

onActiveDatumChange

((id: string | null) => void) | undefined

—

optional

—

renderer

ChartRenderer | undefined

—

optional

—

className

string | undefined

—

optional

—

theme

import("@grassroot/theme").PartialChartTheme | undefined

—

optional

—

title

string | undefined

—

optional

—

description

string | undefined

—

optional

—

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required
Description: —

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required
Description: —

Prop: forceSeed
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: forceIterations
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional
Description: —

Prop: selectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultSelectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: onSelectedIdsChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Events

Event	Payload
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`
`onSelectedIdsChange`	`((ids: readonly string[]) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { ForceGraphChart } from "@grassroot/charts-vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required

Prop: forceSeed
Type: number | undefined
Default: —
Requirement: optional

Prop: forceIterations
Type: number | undefined
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode | undefined
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`
`selectedIdsChange`	`[ids: readonly string[]]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootForceGraphChart } from "@grassroot/charts-angular";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: "none"
Requirement: optional

Prop: selectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: SelectionValue) => void
Default: —
Requirement: optional

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required

Prop: forceSeed
Type: number
Default: —
Requirement: optional

Prop: forceIterations
Type: number
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`
`selectedIdsChange`	`readonly string[]`

Content regions

dataSummary
default

Import

import { ForceGraphChart } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

nodes

readonly NetworkNode[]

—

required

links

readonly NetworkLink[]

—

required

forceSeed

number

—

optional

forceIterations

number

—

optional

selectionMode

"none" | "single" | "multiple"

"none"

optional

selectedIds

readonly string[]

—

optional

defaultSelectedIds

readonly string[]

—

optional

onSelectedIdsChange

(ids: readonly string[]) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

style

string

—

optional

width

number

—

optional

height

number

—

optional

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required

Prop: forceSeed
Type: number
Default: —
Requirement: optional

Prop: forceIterations
Type: number
Default: —
Requirement: optional

Prop: selectionMode
Type: "none" | "single" | "multiple"
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(ids: readonly string[]) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { ForceGraphChart } from "@grassroot/charts-solid";

Props

Prop

Type

Default

Requirement

nodes

readonly NetworkNode[]

—

required

links

readonly NetworkLink[]

—

required

forceSeed

number

—

optional

forceIterations

number

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

style

JSX.CSSProperties

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

"auto"

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

Prop: nodes
Type: readonly NetworkNode[]
Default: —
Requirement: required

Prop: links
Type: readonly NetworkLink[]
Default: —
Requirement: required

Prop: forceSeed
Type: number
Default: —
Requirement: optional

Prop: forceIterations
Type: number
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: "auto"
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Events

Event	Payload
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onSelectedIdsChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary