As developers, we strive to make data shine for our users. Visualizing data is key to this, turning complex numbers into clear insights. But adding JavaScript charting libraries to our apps isn’t always a walk in the park. That’s where this article comes in.

In this article, I’ll guide you through integrating three popular JavaScript charting libraries – Highcharts, Recharts, and Chart.js – with  Handsontable. Together, we’ll build a stock portfolio, where charts will be rendered one by one using these libraries, and the Handsontable data grid will provide their data to summarise the dataset.

What is Highcharts?

Highcharts is an enterprise-ready JavaScript charting library, first released in 2009. Created by the Highsoft company located in a charming Norwegian city Vik, this library has become one of the most popular projects on the market, mostly due to the extensive support for different types of charts.

Features of Highcharts JavaScript charting library:

• Framework integration: The Highcharts library has seamless integration capabilities across various frameworks, ensuring a smooth implementation. It extends its support not only to mainstream frameworks like Angular, React, and Vue but also to server-side technologies and mobile platforms, encompassing Python, Node.js, .NET, Android, and iOS.
• Advanced accessibility: Highcharts is designed to make data visualization accessible to everyone, including individuals with disabilities. Beyond basic accessibility features, Highcharts collaborates with the Sonification Lab at Georgia Institute of Technology, pioneering the use of sound for data visualization. This innovative approach allows users to hear data.
• Complete feature set: The library handles complex, dynamic data sets with ease thanks to its unique features, such as live data updates, multi-axis support, and advanced exporting functions.
• Frequent updates: Highcharts has regular updates, typically releasing new versions every few months. These updates include bug fixes, performance enhancements, and adding new features.
• Active community: The Highcharts community, with over 11.8K stars and 3.5K forks on GitHub, not only cultivates collaboration and knowledge sharing but also plays a key role in the platform’s development. This ecosystem of users and contributors, supported by community integrations and their own developer’s forum, is an invaluable resource for troubleshooting and inspiration in case you need it.
• Licensing model: Highcharts offers a wide range of products with different pricing structures tailored to your needs. A commercial license is required for corporate applications – pricing varies depending on factors like internal use, SaaS, or OEM. These licenses operate on a subscription basis. For non-commercial use, such as educational projects or personal exploration, certain products may be accessible for free.

Highcharts + Handsontable demo

What is Recharts?

Recharts is a composable JavaScript charting library built specifically for React, offering features tailored to React developers’ needs. Its component-based architecture particularly stands out, providing granular control over each element.

Features of Recharts JavaScript charting library:

• XAxis and YAxis: Unlike some charting libraries that automatically generate axes, Recharts provides XAxis and YAxis components. This design choice gives you the flexibility to tailor axes to the data’s specific nuances, such as custom tick marks, labels, and orientations.
• Tooltip: The Tooltip component in Recharts is highly customizable. You can control its content, styling, and behavior. It makes it possible to present detailed information in various formats (e.g., HTML or custom React components) upon hovering over chart elements.
• ResponsiveContainer: Addressing the common challenge of making charts adaptable to various screen sizes, the ResponsiveContainer component automatically resizes the chart to its container’s dimensions.
• Legend: The Legend component isn’t just a simple key to the data series. It can be customized to interact with other chart elements. For instance, you can implement functionality to toggle the visibility of specific data series within the chart.
• Licensing: Recharts is open-source and available under the MIT license.

Recharts + Handsontable demo

What is Chart.js?

Chart.js is a free, open-source JavaScript charting library for data visualization that helps to render charts and graphs for your apps. It was created by London-based web developer Nick Downie in 2013 but has come a long way since then.

Today, it’s maintained by the community. It’s the second most popular JavaScript charting library on GitHub by the number of stars (65K) after D3.js, considered significantly easier to use, though less customizable.

Chart.js is engineered for performance and ease of use. It leverages the HTML5 canvas element for rendering highly responsive and visually appealing charts, operating smoothly across different devices and platforms, and providing a decent UX.

Features of Chart.js JavaScript charting library:

• Rendering speed: Chart.js offers fast rendering of charts, even when dealing with a significant amount of data. This speed is particularly beneficial for web applications requiring real-time data visualization.
• Responsiveness: The library automatically adjusts chart sizes to be fully responsive and fit any screen dimension. It ensures optimal display on desktops, tablets, and smartphones.
• Interactivity: Chart.js supports interactive features, such as tooltips and animations. It enhances user engagement and understanding of the data presented.
• Ease of integration: With comprehensive documentation and examples available, integrating Chart.js into projects is straightforward.

Chart.js + Handsontable demo

Final thoughts on integrating JavaScript charting libraries with Handsontable

Integrating JS charting libraries with the Handsontable data grid offers a powerful combination for web developers aiming to cook up dynamic, data-heavy applications. Take those for digging into sales and revenue analysis, crunching financial metrics, diving deep into market trends, understanding your customers, or streamlining the supply chain – the list goes on.

Related articles

If this chat sparked your interest, we’ve got other blog posts covering similar topics. Check them out:

• Hands-on: Integrating React Hook Form with React data grid 
• Hands-on: Format date with date-fns and day.js in a data grid