In this blog series we compare JavaScript Chart Libraries. There are a wide range of libraries and frameworks for creating charts and graphs in React, JavaScript, Angular or Vue. Choosing the right one for your needs requires careful thought, and our helpful guides shed some light on the Best JavaScript Charts & Graphs to help you make the right choice for your DataVisualization applications.
In this post we’re looking at HighCharts. We’re going to discuss what is HighCharts, what are the pros & cons of this library, how to create charts with HighCharts, plus using the Boost Library to improve the performance of HighCharts and finally alternatives to HighCharts for complex enterprise data-visualization applications.
What is HighCharts?
HighCharts is a popular, commercial JavaScript chart library used for creating interactive charts & graphs within web applications. It started as a founders “humble quest for a simple charting tool to measure snow depth measurements”. It has since grown into a widely used and feature-rich JavaScript chart with a range of chart types including line charts, area charts, column charts, bar charts, pie charts, maps, gantt and more.
HighCharts stands out for it’s ease of use, with a simple clean API, a wide variety of chart types, plus plenty of high quality demos. It’s probably the best-known commercial JavaScript Chart library, but is it the best for complex enterprise applications? Find out more below.
What are the Pros and Cons of HighCharts?
Advantages (Pros) of HighCharts?
Here are the advantages of HighCharts.
- Provides an interactive and responsive chart library with plenty of chart types including line, scatter, bar, pie, bubble, maps, stock charts, gantt and more
- More comprehensively feature-complete than most of the free open source chart libraries.
- Lightweight core library: 272kb minified and 96kb Gzipped according to Bundlephobia
- Good demos and examples available on the website
- Ease of use and flexibility cited often in customer reviews
- A strong focus on accessibility, including support for screen readers and keyboard navigation
- Active community, with over >25,000 questions on StackOverflow plus a public forum
- Extra features such as an export server, and chart dashboards are available
Drawbacks or Disadvantages (Cons) of HighCharts?
While HighCharts is a popular tool for datavisualization, it also has some limitations and disadvantages:
Customization Complexity
While the ability to customize the look & feel of the charts is a strength, achieving specific customizations to match business requirements can sometimes require extensive configuration. This may require a deep understanding of the library, which might be time-consuming.
Performance
While Highcharts handles moderate amounts of data efficiently, due to its SVG rendering it experiences performance issues when rendering larger datasets
According to internet searches, HighCharts can be slow and struggles with performance with large datasets or many charts on page (vi). For example, some google searches report:
- “Slow response in line graph rendering” (i) – slowdown experienced from 3,000 datapoints, and becomes unresponsive at 20,000 points
- “Chart update is slow in Highstock chart with multiple series and large data” (ii) – HighStocks chart with 10-20 series and 10k points is unresponsive even with Boost module
- “Too slow render” (iii) – with only 6,000 data-points on a chart, it renders too slowly.
Realtime or dynamic updates are possible, but performance problems are reported here also.
Pricing & License Structure
Some users report that pricing can be too high for small to medium enterprises or that the pricing and costs can be higher than expected (iv).
While starting at a very low price point, pricing for HighCharts can increase sharply when perpetual options, SaaS or OEM deployments, or features such as stock charts, maps or dashboards are included (v).
For example, a single developer license of HighCharts core starts at $168 per year for an annual subscription.
However, if you select these options on the store, the pricing now jumps to over $32,000 (v)
- 5 perpetual developer licenses of HighCharts
- Stock Charts
- Maps
- 5 developer seats of Dashboards
- SaaS deployment
How to Improve HighCharts Performance?
Rendering performance or chart drawing speed often comes up as a disadvantage of HighCharts (vi). For a simple application with no more than a few JS charts with relatively small data sets, this may not be a problem. However, data is getting bigger and bigger all the time.
Dashboards in business applications may have to deal with tens of charts, each with a number of series and thousands of data-points per series. This can add up to a huge problem as requirements become more complex.
The recommendation from HighCharts to improve performance include disabling animations, and applying the Boost module, which provides a stripped down version of the chart with WebGL acceleration. However, according to the HighCharts official documentation (vii) (viii) (ix) many limitations apply to HighCharts Boost, such as:
- Pointmarkers are not applied to line series types.
- Only circle markers are supported for scatter series
- Columns and bars are always 1-pixel wide
- Line series width can only be 1-pixel thick when Boost module enabled
- Area of area and area spline series are always drawn as 1px columns.
- Dash style for lines are not supported
- Stacking and negative colours are not supported
- Point click handlers are not supported in Boost mode
As a result, while it is technically possible to achieve JavaScript charts with large numbers of data-points with HighCharts and Boost, the actual functionality and performance may be limiting for enterprise applications requiring big data handling.
What are the Alternatives to HighCharts?
For applications which have demanding requirements, complex dashboards or big-data / performance requirements one viable alternative is SciChart.js.
SciChart.js has been designed from the ground up for extremely demanding, big-data and high performance applications. Built on-top of a proprietary, cross-platform rendering engine using C++ SciChart supports targetting WebGL as well as desktop and mobile based hardware-acceleration APIs such as OpenGL, DirectX, Metal.
With a fully JavaScript, TypeScript API and React library support, SciChart can integrate seamlessly into enterprise apps, enabling mission-critical visualization projects without compromising on functionality. Key customers of SciChart include medical users such as Siemens, Formula One, Nasa, financial users such as JP Morgan and more.
What are the Advantages of SciChart.js vs. HighCharts?
When compared to HighCharts, SciChart.js has the following advantages:
- Very high performance for big datasets (1k, 10k, 100k, 1M, 10M+)
- No limitations or feature reduction when WebGL is enabled. All chart types and features are fully hardware accelerated
- Can have tens or hundreds of charts on a single page or hundreds of chart series without introducing performance problems or slowdown
- Highly extensible API with many endpoints allowing for deep customisation, overriding or bespoke behaviour to fit your specific application needs
- Expertise in complex, mission critical applications in the scientific, financial and medical sectors
- Outstanding enterprise technical support, with many testimonials and reviews citing this as a benefit
- Transparent licensing, with a lower price point once advanced features, perpetual licensing or SaaS or OEM deployment options have been selected
Learn more about SciChart.js
To learn more about SciChart.js or to discover its features in more detail, take a look at the post below:
Alternatively, to see in-depth performance of SciChart vs. several chart libraries including HighCharts, read the article with a performance comparison below:
Contact us to learn more
SciChart.js is a fully WebGL accelerated JavaScript and React Chart Library designed for complex, mission critical data visualization applications. Now with a FREE community edition. If you have a question or would like to learn more about our products & services, please contact us:
References in this article
- HighCharts forum topic 48993 🔗
- HighCharts forum topic 44239 🔗
- HighCharts forum topic 41631 🔗
- G2 reviews for HighCharts filtered by keyword ‘pricing’ 🔗
- Pricing correct at the time of writing, when quoted from the HighCharts online store using these options.
- Google search ‘HighCharts Performance issue’
- Github HighCharts issue #5223 🔗
- HighCharts forum topic 46151 🔗
- HighCharts documentation advanced-chart-features / boost-module 🔗
Recent Blogs