Network Graph for JavaScript

Chart.ts provides a full-featured graph chart type for network visualization. Force-directed, hierarchical, circular, and grid layouts. Custom node shapes and sizes, edge labels, directional arrows, and interactive drag-to-rearrange. Renders as SVG for CSS styling with Tailwind.

$npm install @chartts/react
example.tsx
import { GraphChart } from "@chartts/react"

<GraphChart
  nodes={[
    { id: "api", label: "API Gateway", group: "infra" },
    { id: "auth", label: "Auth Service", group: "infra" },
    { id: "users", label: "Users DB", group: "data" },
    { id: "cache", label: "Redis Cache", group: "data" },
    { id: "web", label: "Web App", group: "frontend" },
    { id: "mobile", label: "Mobile App", group: "frontend" },
  ]}
  edges={[
    { source: "web", target: "api" },
    { source: "mobile", target: "api" },
    { source: "api", target: "auth" },
    { source: "api", target: "cache" },
    { source: "auth", target: "users" },
  ]}
  layout="force"
  className="h-96"
  nodeClassName={n => ({
    infra: "fill-cyan-400",
    data: "fill-emerald-400",
    frontend: "fill-violet-400",
  }[n.group])}
  edgeClassName="stroke-zinc-600"
  labels
  directed
  draggable
/>

Features

Force-directed layout with physics simulation
Hierarchical layout for tree structures
Circular and grid layout options
Custom node shapes: circle, rect, diamond, hexagon
Directional arrows on edges
Edge labels and weighted edges
Interactive drag-to-rearrange nodes
Read the DocsSee DemosExamples