Real-Time Activity Line Chart

An animated line chart that simulates real-time data updates, with a live indicator and pause/resume controls.

Charts & Graphs charts-graphs animated real-time recharts intermediate

Prompt

Create a real-time updating line chart with:
- Line chart showing "Active Users" over the last 60 seconds
- Updates every 2 seconds with a new data point, oldest drops off
- Animated line that draws smoothly as new data arrives
- A pulsing green "Live" badge in the top-right corner
- Pause/Resume toggle button
- Current value displayed prominently
- Tooltip on hover showing exact value and time
- Subtle gradient fill under the line
- Use recharts, Tailwind CSS, dark mode

Share:Share on X