Hi,

With React, you can do this:

import { Chart } from "smart-webcomponents-react/chart";
import { useEffect, useState } from "react";

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

  useEffect(() => {
    const ws = new WebSocket('wss://example.com/live-data');
    ws.onmessage = (event) => {
      const point = JSON.parse(event.data);
      setData(prev => [...prev.slice(-49), point]); // keep last 50 points
    };
    return () => ws.close();
  }, []);

  return <Chart caption="Live Data" type="line" dataSource={data} />;
}

Using useState ensures reactive updates in React.

As for Typescript – sure, this is supported.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/