Network Monitoring Dashboards

Name: Chart.ts
Author: Chart.ts

Real-time infrastructure dashboards with Chart.ts. Network topology graphs with force-directed layout, geographic maps for global infrastructure, live streaming metrics via WebSocket and SSE, and WebGL scatter for high-cardinality data at 100k+ points.

Chart Types You Need

Graph

Network topology with force-directed and hierarchical layouts

Geo Map

Geographic server locations and traffic routes

Gauge Chart

CPU, memory, disk, and network health indicators

Heatmap

Traffic patterns and incident density by time

Line Chart

Latency, throughput, and error rate time series

Scatter Plot

WebGL scatter for 100k+ metric data points

Example Implementation

dashboard.tsx

import { GraphChart, GeoChart, GaugeChart, LineChart } from "@chartts/react"
import { useWebSocket } from "@chartts/websocket"

export function NOCDashboard({ infrastructure }) {
  const { data: metrics } = useWebSocket("wss://metrics.internal/stream")

  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-8 rounded-xl card p-6">
        <GraphChart
          nodes={infrastructure.nodes}
          edges={infrastructure.edges}
          layout="force"
          className="h-96"
          nodeClassName={n => n.status === "healthy"
            ? "fill-emerald-500"
            : "fill-red-500 animate-pulse"}
          edgeClassName="stroke-zinc-600"
          labels
        />
      </div>
      <div className="col-span-4 grid gap-4">
        <div className="rounded-xl card p-4">
          <GaugeChart value={metrics.cpu} max={100} label="CPU" className="h-28"
            zones={[
              { max: 70, className: "fill-emerald-500" },
              { max: 90, className: "fill-amber-500" },
              { max: 100, className: "fill-red-500" },
            ]}
          />
        </div>
        <div className="rounded-xl card p-4">
          <GaugeChart value={metrics.memory} max={100} label="Memory" className="h-28" />
        </div>
      </div>
      <div className="col-span-12 rounded-xl card p-6">
        <LineChart
          data={metrics.latency}
          x="timestamp"
          y={["p50", "p95", "p99"]}
          className="h-48"
          animate
        />
      </div>
    </div>
  )
}

Why Chart.ts for Network Monitoring

Force-directed graph layout for network topology visualization

Geographic maps for global infrastructure views

Real-time streaming via WebSocket and SSE with auto-reconnect

WebGL scatter for 100k+ metric data points at 60fps

Gauge charts with configurable health threshold zones

Linked multi-panel dashboards with correlated views

Dark mode optimized for NOC and SOC environments

Under 15kb total for all chart types used

Start building your network monitoring

Install Chart.ts and have your first chart rendering in 2 minutes.

$npm install @chartts/react

Get Started See Examples