Real-Time Charts

Build live dashboards with real-time updating charts. Chart.ts supports smooth transitions between data states, streaming append for time series, and auto-scrolling time axes. Works with WebSocket, Server-Sent Events, and polling.

$npm install @chartts/react
example.tsx
import { LineChart } from "@chartts/react"
import { useState, useEffect } from "react"

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

  useEffect(() => {
    const ws = new WebSocket("wss://api.example.com/stream")
    ws.onmessage = (e) => {
      const point = JSON.parse(e.data)
      setData(prev => [...prev.slice(-50), point])
    }
    return () => ws.close()
  }, [])

  return (
    <LineChart
      data={data}
      x="timestamp"
      y="value"
      className="h-64"
      animate
      lineClassName="stroke-emerald-400"
    />
  )
}

Features

Smooth transitions between data states
Streaming data append for time series
Auto-scrolling time axis
Works with WebSocket, SSE, and polling
60fps animation performance
Memory-efficient with windowed data
Under 15kb gzipped
Read the DocsSee DemosExamples