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/
.
