React Real-Time Charts

Add real-time streaming charts to React apps with @chartts/websocket. The useWebSocket hook connects to any WebSocket, SSE, or HTTP polling endpoint and feeds live data to Chart.ts components. Rolling buffers keep memory bounded, auto-reconnect handles failures, and pause/resume gives users control.

$npm install @chartts/react @chartts/websocket
example.tsx
import { LineChart, BarChart, GaugeChart } from "@chartts/react"
import { useWebSocket } from "@chartts/websocket"

export function LiveDashboard() {
  const { data, status, pause, resume, reconnect } = useWebSocket(
    "wss://api.example.com/metrics",
    {
      bufferSize: 200,
      reconnect: true,
      reconnectInterval: 3000,
      maxReconnectAttempts: 10,
      transform: (msg) => JSON.parse(msg.data),
    }
  )

  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-12 flex items-center gap-2">
        <span className={`h-2 w-2 rounded-full ${
          status === "connected" ? "bg-emerald-400" : "bg-red-400"
        }`} />
        <span className="text-xs muted-text">{status}</span>
        <button onClick={pause} className="text-xs">Pause</button>
        <button onClick={resume} className="text-xs">Resume</button>
      </div>
      <div className="col-span-8 rounded-xl card p-6">
        <LineChart
          data={data}
          x="timestamp"
          y={["cpu", "memory"]}
          className="h-64"
          animate
          transition={100}
        />
      </div>
      <div className="col-span-4 rounded-xl card p-6">
        <GaugeChart
          value={data[data.length - 1]?.cpu ?? 0}
          max={100}
          label="CPU Now"
          className="h-48"
        />
      </div>
    </div>
  )
}

Features

useWebSocket React hook for WebSocket connections
Server-Sent Events and HTTP polling adapters
Rolling buffers with configurable size (bound memory usage)
Auto-reconnect with exponential backoff and max attempts
Pause/resume streaming with user controls
Next.js compatible (client component with SSR fallback)
Smooth 60fps transitions between data updates
Read the DocsSee DemosExamples