As the new year approaches, I’d like to review the landscape for JavaScript Chart libraries in 2024. Javascript is a popular language, used by millions of applications worldwide. There are many Javascript chart libraries available, and choosing the right one can be a difficult decision. “Best” is a subjective term so we’re going to explore which selection criteria to apply for your specific needs whether that’s ease of use, big data, complexity or simplicity.
A brief overview of the JavaScript Chart Library landscape in 2024
Searching on npm.js for ‘Chart‘ yields 6,000 packages. The most popular appear at the top of the search, which include: chart.js with almost 2 million downloads per week, recharts; a popular react JS chart library, ag-charts; from the creators of ag-grid, d3.js; a popular (but complex) raw SVG data-visualisation library, ApexCharts, Plotly, SciChart and more.
It certainly isn’t an easy task to choose a JS chart for your application! This is why many turn to google to search ‘Best JavaScript Chart Library‘ to read recommendations from fellow developers. However, this also doesn’t narrow down your search very much.
This search yields several comparison blog posts which mostly repeat the same packages, ordered by popularity and with some feature detail.
There is one comparison post in particular which I found helpful: flatlogic.com/blog/best-19-javascript-charts-libraries.
This blog included a flow chart of why and when you would use certain chart libraries.
The blog summarised: “What matters for your project”
- If a lightweight library, but perhaps with limited customisation options, choose chart.js.
- For a library with many chart types, but potentially heavier, choose Plotly.js or HighCharts
- However this article is a little out of date. We’d like to introduce a new category: Advanced, Big-Data, Real-time or complex charts, choose SciChart
Advanced, Big-Data, Real-time or complex charts
There’s an emerging gap in the market. More than just supporting many chart types there is another subset of JS applications which require:
- Big Data
- Large datasets
- High Performance
- Realtime Streaming
- Complex interactions
- Deep customisation
Perhaps the application could be in the scientific, engineering, medical or financial field and include realtime ECG viewers, telemetry in aerospace and motorsport. Control systems and even oil & gas well site data visualization.
More and more desktop applications are being converted to JavaScript with it’s abundance of developers, resources and info on the web. However, former developers of desktop apps are used to high performance & deep customisation options which were previously available to them.
This is the topic of this blog post: understanding why one size doesn’t fit all in JS Chart Libraries and how to decide which is the Best JavaScript Chart for your specific needs.
Understanding Your Needs: Why One Size Doesn’t Fit All in JS Chart Libraries
“Best” is a subjective term. Understanding your specific needs is the key to selecting the best chart library. If you’re trying to display simple weather data on a website, Chart.js is a great choice, but if you want to create a novel rocket telemetry system or develop a chart driven analysis tool, you’ll have to use SciChart.
Applications can have diversity in requirements, and in these cases you use the right tool for the job.
Scale of Data: The volume and complexity of data vary significantly from one application to another. A library that handles large-scale, real-time big data efficiently like SciChart might be overkill for a project with simpler, static data sets. Likewise, many open source charts can’t handle datasets larger than ~1,000 points.
Type of Visualizations: Different projects may require different types of charts. While some applications need basic bar or line charts, others might need sophisticated, interactive dashboards, financial charts, linked charts or 3D visualizations.
User Interaction: The level of interactivity required can also influence your choice. Some applications demand dynamic, clickable charts that offer drill-down features, whereas others may only need static, informational visualizations.
Integration and Compatibility
Other selection criteria require you to look at compatibility with your tech stack.
Compatibility with Tech Stack: Ensuring that the chart library integrates seamlessly with your current tech stack (like React, Angular, or Vue) is crucial.
Responsive and Mobile-Friendly: With the increasing use of mobile devices, choosing a library that offers responsive and mobile-friendly charts is essential.
Performance and Efficiency
Rendering Performance: For applications that handle complex or large datasets, the rendering speed of the chart library can significantly impact user experience. Many searches such as ‘Plotly is slow‘ or ‘Chart JS is slow‘ reveal that this is a big problem in some applications.
Resource Efficiency: Consider the library’s impact on overall application performance, especially for resource-constrained environments like embedded systems or mobile applications. This can impact not only application performance but hardware costs, where a more efficient chart library can be run on lower-cost hardware.
Customization and Extensibility
Further criteria you might want to select a JS chart on:
Styling and Branding: The ability to customize the look and feel of the charts. A consistent look and feel is not only necessary for enterprise branding, but also for minimising errors in a healthcare setting.
Extensibility: Some projects may require extending the library with custom functionality.
Cost and Licensing: Not all projects have the budget for paid chart libraries, making cost an important factor. Nevertheless, sometimes cost of customising an open-source library for specific needs can outweigh the licensing cost. Likewise, maintaining an in-house solution can be equally expensive.
Open Source vs. Commercial: Open-source libraries offer flexibility and community support, while commercial libraries often come with dedicated support and additional features helping to eliminate risk.
Why did we decide to write SciChart.js?
A new subset of applications are emerging which have demanding requirements. These applications may be in Formula One telemetry, Rocket telemetry or Aerospace, Medical devices which run JS ECG/EKG style charts on an embedded device, Industrial processes and life sciences, or financial applications pushing the boundary of what is possible today in JavaScript.
Big-Data is getting bigger and bigger. Charting applications are getting more complex. Big-Data Visualization is more of a challenge today than five years ago, and in five years time will be an even bigger challenge.
These applications formerly have existed as desktop apps but as JavaScript becomes more popular they are beginning to migrate to the browser.
All the available JS Chart options are built on the same technology: SVG or HTML5 canvas.
- Very few are using WebGL
- Very few are using data virtualisation techniques
- None are using advanced technology such as WebAssembly
- None are combining the above to create charts which are not only fast & powerful, but also flexible, customisable, infinitely configurable.
SciChart’s new JavaScript Chart Library combines all of the above.
Literally nothing can match the performance of SciChart.js for Big-data, whilst maintaining a flexible and deeply configurable library. It’s the topic of a separate blog post but check out how much the performance of SciChart.js differs from Plotly, HighCharts, and chart.js for datasets up to millions of rows.
Performance alone isn’t a reason to choose a chart library so other benefits SciChart brings to the table include deep configurability for complex apps, ability to write your own interactions and link charts for custom dashboards & analytics.
Which is the Best JavaScript Chart in 2024?
There are plenty of JavaScript charting & data visualization options out there & you may find yourselves today looking for the 'Best JavaScript Chart' - but I answer that question with a question. "Best for what?"
"Best for What?"
- Best for simplicity? Consider a basic option such as Chart JS
- Best price? Consider a free open source option such as Canvas JS, ApexCharts, Plotly.js
- Best configurability? Choose D3.js with deep configuration at expense of complexity, performance & development time.
- Best for Advanced, Big Data, Real-time streaming or complex charts? Choose SciChart.js
The Future of JavaScript Chart Libraries: Trends and Predictions
Big-Data is getting bigger and bigger. Big-Data Visualization is more of a challenge today than five years ago, and in five years time will be an even bigger challenge. The trend of more complex data-visualization as desktop apps migrate to JavaScript will continue.
I'm going to expand on this in future blog posts, where I'll give my thoughts on the future of JavaScript charts and the industry, and why bigger data and more complex data-visualization is here to stay.
Top comments (0)