Chart.js Streaming — Real-Time Data Visualization
In this tutorial, you will learn about Chart.js Streaming. We cover key concepts, practical examples, and best practices to help you master this topic.
Chart.js streaming plugin enables live-updating charts that automatically scroll and render new data from real-time sources like WebSockets and server-sent events.
What You'll Learn
By the end of this guide, you will install and configure the streaming plugin, push real-time data via Websocket, set scroll window duration, pause and resume streaming, and build a live data dashboard.
Basic Streaming Config
// npm install chartjs-plugin-streaming
Chart.register(StreamingPlugin);
options: {
scales: {
x: {
type: 'realtime',
realtime: {
duration: 60000,
refresh: 1000,
delay: 500,
onRefresh: function(chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: Math.random() * 100
});
}
}
}
}
}
WebSocket Streaming
var ws = new WebSocket('wss://example.com/live-feed');
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
chart.data.datasets[0].data.push({
x: data.timestamp,
y: data.value
});
chart.update('none');
};
Pause and Resume
var isPaused = false;
document.getElementById('pause').onclick = function() {
isPaused = !isPaused;
chart.options.scales.x.realtime.pause = isPaused;
chart.update('none');
};
Common Mistakes
1. Not Setting a Refresh Interval
The onRefresh callback needs a refresh interval. Set realtime.refresh in milliseconds.
2. Memory Leak with Infinite Data
Data accumulates indefinitely. Set realtime.duration to auto-remove data outside the scroll window.
3. Chart.update on Every Message
Calling chart.update() on every WebSocket message causes performance issues. Use update('none') for silent updates.
4. Time Scale Without Proper Format
The X axis must use type: 'realtime'. Regular 'time' scale does not scroll automatically.
5. Stream Chart on Hidden Tab
Browsers throttle timers in hidden tabs. Use Web Workers or set realtime.refresh carefully.
Practice Questions
Q1: What scale type does streaming use? A: type: 'realtime' on the X axis.
Q2: How does onRefresh work? A: It is called at each refresh interval. Push new data points inside it.
Q3: How do you control the visible time window? A: Set realtime.duration in milliseconds (e.g., 60000 for 1 minute).
Q4: How do you pause streaming? A: Set realtime.pause to true on the scale config.
Q5: How do you prevent memory bloat? A: The plugin auto-prunes data outside the duration window.
Challenge: Build a dashboard with 3 streaming charts (CPU, memory, network). Each chart connects to a separate WebSocket feed. Add start/stop controls.
FAQ
Try It Yourself
Build a live-updating sine wave chart.
<!DOCTYPE html>
<html>
<head>
<title>Streaming Chart Demo</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Live Streaming</h2>
<button onclick="togglePause()">Pause/Resume</button>
<canvas id="liveChart" width="600" height="350"></canvas>
<script>
Chart.register(StreamingPlugin);
var t = 0;
var chart = new Chart(document.getElementById('liveChart'), {
type: 'line',
data: {
datasets: [{
label: 'Sine Wave',
data: [],
borderColor: '#4ecdc4',
backgroundColor: 'rgba(78,205,196,0.05)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
scales: {
x: {
type: 'realtime',
realtime: {
duration: 30000,
refresh: 100,
delay: 0,
onRefresh: function(chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: Math.sin(t) * 50 + 50
});
t += 0.1;
}
}
},
y: {
min: 0,
max: 100
}
},
plugins: {
legend: { display: true }
}
}
});
function togglePause() {
var isPaused = chart.options.scales.x.realtime.pause;
chart.options.scales.x.realtime.pause = !isPaused;
chart.update('none');
}
</script>
</body>
</html>
What's Next
Add zoom and pan to charts.
Zoom — Zoom and pan plugin. Accessibility — Making charts accessible.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro