Real-Time Charts

Chart.ts has first-class support for real-time streaming data. Connect to WebSocket, Server-Sent Events, or HTTP polling sources with createStreamingChart(). Rolling buffers keep memory bounded, auto-reconnect handles network failures, and pause/resume gives users control. Under 15kb.

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

export function LiveMetrics() {
  const { data, status, pause, resume } = useWebSocket(
    "wss://metrics.example.com/stream",
    {
      bufferSize: 500,     // keep last 500 points
      reconnect: true,     // auto-reconnect on disconnect
      reconnectInterval: 2000,
      transform: (msg) => JSON.parse(msg.data),
    }
  )

  return (
    <div>
      <div className="flex items-center gap-2 mb-4">
        <span className={status === "connected"
          ? "text-emerald-400" : "text-red-400"}>
          {status}
        </span>
        <button onClick={pause}>Pause</button>
        <button onClick={resume}>Resume</button>
      </div>
      <LineChart
        data={data}
        x="timestamp"
        y={["cpu", "memory", "network"]}
        className="h-64"
        animate
        transition={150}
      />
    </div>
  )
}

Features

WebSocket, Server-Sent Events, and HTTP polling support
Rolling buffers with configurable size to bound memory
Auto-reconnect with exponential backoff
Pause/resume streaming control
Smooth 60fps transitions between data updates
Multi-source streaming from different endpoints
Framework hooks: useWebSocket (React), useStreaming (Vue/Svelte/Solid)
Read the DocsSee DemosExamples