How we choose the best JavaScript chart library for visualising data from IoT sensors?
In smart home projects, medical devices, and HVAC systems, charts are not just decorative; they are decision-making tools. They must be clear, dynamic, and adapted to their operating environment – which is why choosing the best JavaScript chart library becomes critical.
In one of our implementations, which involved monitoring data from dozens of sensors, the seemingly simple requirement to “make charts” quickly turned into the question:
“How can we build this so that it works quickly, looks good, and doesn’t fall apart on a tablet?”
The specific challenge was that the data comes through MQTT, the users are on mobile devices, the branding matters, and everything has to work smoothly in a browser. So, we started looking for a web data visualisation library that could handle the task.
What was the real problem?
There were several challenges:
- a very large number of points — not all of them fit on the screen,
- the need for real-time operation,
- the need for smooth zooming and downsampling,
- integration with the React application,
- optimization for mobile devices.
In short: the data was too dense, the interface had to be lightweight, and the user had to be satisfied.
In the end, we had to ask ourselves:
What Are the Top JavaScript Libraries Available?
There are many JavaScript data visualization libraries on the market, but not all of them are suitable for production projects. After testing several options, we focused on four that have been among the top JS chart libraries for years: Chart.js, Plotly.js, ECharts, and D3.js.
Chart.js - simple, lightweight, effective
(best JavaScript chart library for small projects and MVPs)
If you need basic charts and want fast implementation, this is a good choice. Its low weight, simple API, and good documentation make it one of the most frequently used open source JavaScript chart libraries.
<meta charset="UTF-8">
<title>Chart.js Timeseries</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<style>#chartjsChart { width: 100%; height: 400px; }</style>
<canvas id="chartjsChart"></canvas>
<script>(function() {
const ctx = document.getElementById('chartjsChart').getContext('2d');
const nowChartjs = Date.now();
const chartjsData = Array.from({ length: 10000 }, (_, i) => ({
x: nowChartjs + i * 1000,
y: Math.sin(i / 100) + Math.random() * 0.5
}));
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Sensor',
data: chartjsData,
borderColor: 'steelblue',
pointRadius: 0
}]
},
options: {
responsive: true,
parsing: false,
scales: {
x: {
type: 'time',
time: { unit: 'minute' },
title: { display: true, text: 'Time' }
},
y: {
title: { display: true, text: 'Value' }
}
}
}
});
})();</script>
Plotly – a tool for deeper analysis
(interactive JavaScript charts and scientific data)
When the ability to zoom in, filter, and present large data sets is important, Plotly shows its strength. It has proven itself in our work, including in a project for the medical sector, where precise, interactive charts with zoom and drill-down capabilities were needed.
<meta charset="UTF-8">
<title>Plotly Timeseries</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plotlyChart" style="width:100%;height:500px;"></div>
<script>(function() {
const nowPlotly = Date.now();
const xPlotly = [], yPlotly = [];
for (let i = 0; i < 10000; i++) {
xPlotly.push(new Date(nowPlotly + i * 1000));
yPlotly.push(Math.sin(i / 100) + Math.random() * 0.5);
}
Plotly.newPlot('plotlyChart', [{
x: xPlotly,
y: yPlotly,
type: 'scatter',
mode: 'lines',
line: { color: 'steelblue' },
}], {
title: 'Timeseries with Zoom (10,000 points)',
xaxis: { title: 'Time' },
yaxis: { title: 'Value' }
});
})();</script>
ECharts – a dashboard powerhouse
(data visualization tools for web – enterprise class)
It supports live data, integration with MQTT, dark mode, and a multitude of configuration options. We used it when building a dashboard for a manufacturing plant — it easily handled a million points on the chart. If you care about downsampling, zoom, and responsiveness — this is a bull’s-eye.
<meta charset="UTF-8">
<title>ECharts Timeseries</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>#echartsChart { width: 100%; height: 500px; }</style>
<div id="echartsChart"></div>
<script>(function() {
const echartsData = [];
for (let i = 0; i < 1000000; i++) {
echartsData.push([i, Math.sin(i / 300) + Math.random() * 0.3]);
}
const echartsInstance = echarts.init(document.getElementById('echartsChart'));
echartsInstance.setOption({
title: { text: 'Zoom + Decimation (LTTB) – 1,000,000 points' },
tooltip: { trigger: 'axis' },
xAxis: { type: 'value' },
yAxis: { type: 'value' },
dataZoom: [
{ type: 'slider', start: 0, end: 100 },
{ type: 'inside' }
],
series: [{
type: 'line',
data: echartsData,
sampling: 'lttb',
showSymbol: false,
large: true
}]
});
})();</script>
D3.js – complete flexibility, zero compromises
(Chart.js vs D3.js – simplicity versus control)
If you really need custom animation or your own data flow, D3 is the right tool for you. But it’s important to know that you’re creating everything yourself, from scratch. For this reason, many teams are now looking for D3.js alternatives that offer similar flexibility but with less effort.
<meta charset="UTF-8">
<title>D3 Timeseries</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>#d3Chart { width: 100%; height: 500px; }</style>
<svg id="d3Chart" width="1000" height="500"></svg>
<script>(function() {
const svg = d3.select("#d3Chart");
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;
const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
const nowD3 = Date.now();
const d3Data = Array.from({ length: 1000 }, (_, i) => ({
x: new Date(nowD3 + i * 1000),
y: Math.sin(i / 100) + Math.random() * 0.5
}));
const x = d3.scaleTime().domain(d3.extent(d3Data, d => d.x)).range([0, width]);
const y = d3.scaleLinear().domain(d3.extent(d3Data, d => d.y)).range([height, 0]);
const line = d3.line().x(d => x(d.x)).y(d => y(d.y));
g.append("g").call(d3.axisLeft(y));
g.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x));
g.append("path")
.datum(d3Data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", line);
})();</script>
Which is the best JavaScript chart library for each use case?
| Use case | The best library | Why? |
|---|---|---|
|
Dashboard with sensors (real-time) |
ECharts |
MQTT, performance, animations |
|
Charts with zoom capability |
Plotly.js |
Drill-down, interactivity |
|
Mobile interface |
Chart.js |
Lightweight, good responsiveness |
|
POC or MVP |
Chart.js |
Quick implementation, little code |
|
Project with custom flow |
D3.js |
The ability to create exactly what you need |
Comparsion table
General summary
| Library | Chart types | Interaction | Live refresh | License | Customization |
|---|---|---|---|---|---|
|
Chart.js |
basic |
average |
manual |
MIT |
CSS |
|
Plotly.js |
advanced |
very good |
limited |
MIT |
partial |
|
ECharts |
extensive |
very good |
native |
Apache 2 |
high |
|
D3.js |
any |
manual |
own code |
BSD |
full |
Types of interactions
| Library | Version | Types of interactions |
|---|---|---|
|
Chart.js |
4.0 |
Tooltip, legends, selection, hover, simple zoom (plugin), click |
|
Plotly.js |
3.0.1 |
Zoom/pan, lasso, tooltip, animations, drill-down, dynamic views |
|
ECharts |
5.6.0 |
Zoom/pan, slider, tooltip, selection, live update, click/brush |
|
D3.js |
7.9.0 |
Manual: zoom, pan, drag, hover, click, custom events |
Conclusion
The choice of the right library depends on what you really want to show — and to whom.
For this particular project, the client chose ECharts — data of over a million points was displayed smoothly, with zoom capability and automatic decision-making. And that was the main criterion for choosing it.
And finally, a summary of our tests:
- Chart.js — simple, fast, ideal for getting started
- Plotly.js — when data needs to tell a story
- ECharts — for industrial projects with large amounts of data
- D3.js — for creators who know what they want and have time
There is no single “best” library — but you can choose the best JavaScript chart library for a specific project.
Do you have a project and don’t know what to choose?
Are you considering D3.js alternatives, or looking for a tool for interactive JavaScript charts?
Write to us — at WizzDev will analyze your project, show you the differences, and if necessary, we will add an interactive prototype.
Glossary
MQTT
A messaging protocol designed for IoT devices. It enables lightweight and reliable real-time data transfer.
Real-time
Live data updates without the need to refresh the page. A key feature in monitoring, alarm, and industrial systems.
Interactive charts
Charts that respond to user actions — e.g., zoom, pan, click, hover, tooltip. They facilitate data analysis and improve UX.
Drill-down
The ability to click on a chart element (e.g., a bar or point) to go to a more detailed level of data. Helpful in reporting and multi-level analysis.
Decimation (Sampling)
A technique for reducing the number of data points displayed on a chart without losing important information. In ECharts, for example sampling: ‘lttb’option is available.
LTTB (Largest Triangle Three Buckets)
A decimation algorithm that preserves the structure and shape of the chart with large data sets. Used, among others, in ECharts to optimize chart drawing.
Lightweight build
An optimized version of the library (or the chart itself) with a small size, which translates into shorter loading times and better performance on weaker devices (e.g., smartphones).
Open source chart library (JavaScript)
A chart library available under an open license (e.g., MIT, BSD), which means it can be used, modified, and integrated into your own project free of charge.
Customization / Branding
The ability to customize the appearance of charts to your own visual identity — change colors, fonts, legends, icons, or layout.
Data visualization tools for web
A set of JavaScript libraries designed to present data in a browser — in static (e.g., reports) or dynamic (e.g., sensor data) form.
DataZoom
A module in ECharts that allows you to zoom and scroll through data (using both a slider and mouse/touch gestures). Useful for analyzing large data sets.
