Real-time Monitor

Live-updating line chart with streaming data, auto-scrolling x-axis, and threshold alerts.

Server CPU Usage

Memory

Code

example.tsx

import { LineChart, Sparkline } from "@chartts/react"

export function RealtimeMonitor() {
  const [data, setData] = useState(initialData)

  useEffect(() => {
    const interval = setInterval(() => {
      setData(prev => [...prev.slice(1), newPoint()])
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  return <LineChart data={data} x="time" y="cpu" animate={false} />
}

← All examples