Live Data

function pollData() {
    const [pollData, setPollData] = useState<{ x: string; y: number }[]>([
        { x: '1', y: Math.random() * 100 },
        { x: '2', y: Math.random() * 100 },
        { x: '3', y: Math.random() * 100 },
        { x: '4', y: Math.random() * 100 },
        { x: '5', y: Math.random() * 100 },
        { x: '6', y: Math.random() * 100 },
        { x: '7', y: Math.random() * 100 },
        { x: '8', y: Math.random() * 100 },
        { x: '9', y: Math.random() * 100 },
        { x: '10', y: Math.random() * 100 },
    ]);
 
    useEffect(() => {
        const interval = window.setInterval(() => {
            const currentIteration = pollData[pollData.length - 1].x;
            pollData.shift();
            pollData.push({
                x: (parseInt(currentIteration) + 1).toString(),
                y: Math.random() * 100,
            });
            setPollData([...pollData]);
        }, 2000);
        return () => clearInterval(interval);
    }, [pollData]);
 
    return pollData;
}
 
<CoralLineChart
    data={pollData()}
    modifiers={{
        animate: {
            enable: true,
        },
        chart: {
            domainPadding: { x: 32 },
        },
    }}
/>;