JavaScript
Article
By Vaibhav Singhal

Choosing a JavaScript Charting Library: the Main Contenders

By Vaibhav Singhal
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

JavaScript charting is a crowded space with plenty of open-source and paid options, and choosing the right library for your project is not always a straightforward decision. There are many factors to consider before you can make the call.

What I’ve noticed is that more often than not, the choice always comes down to the top three or four libraries – D3.js, Highcharts, FusionCharts or Google Charts. To make your task easier, I’ve compared the top three in detail with pros, cons and live examples.

Note: Please press RERUN on the CodePen demos if the charts don’t load initially.

Let’s get started!

--ADVERTISEMENT--

D3.js

Screenshot of the D3 website

Created by Mike Bostock, D3.js has become almost synonymous with Data Visualization. D3 is based on modern web standards and gives you complete control over how your chart is rendered.

Pros:

  • It’s elegant and beautiful: With D3 you can create mind-blowing visualizations (like this and this) that are simply not possible with any other library. In that sense, all other libraries look like a subset of D3.
  • Lightweight: The D3 core JavaScript file is just 336 KB, the minified version is just 151 KB. This is a great advantage when it comes to building high performance web applications.
  • Highly customizable: D3 doesn’t come with a fancy feature list out of the box. Instead it opts for efficient manipulation of documents based on data, leaving you free to customize it any way you want.
  • Community: Owing to its open-source status, it has a huge community around it. There are already thousands of answered questions on StackOverflow, and if you have new issues you can easily get them answered there, or even in our own forums.
  • Huge gallery for inspiration: D3 has a gallery with 900+ examples for your inspiration. These examples range from very basic to extremely sophisticated and are often interactive.

Cons:

  • Steep learning curve: It’s fun and intellectually stimulating to use D3. But if you are on a deadline and want something that ‘just works’, D3 might not be the right option. FusionCharts and Highcharts would be a better choice in this case because of their ease of use.
  • Browser support: D3 doesn’t support IE 6, 7, 8. It’s sometimes not smooth on IE 9, as well. So if you are targeting a wider audience or enterprises, D3 would be a bad choice.
  • Label management: Label management is an uphill task in D3, but it is automatically taken care of by libraries such as FusionCharts and Highcharts. To see a live example of what I am talking about, visit this page, and click on the discrete bar chart (first row, fourth tile). Then try entering longer names (than ‘A’, ‘B’, ‘C’ etc).
  • Chart export: Libraries such as FusionCharts and Highcharts support the exporting of charts to PNG, JPG, SVG and PDF files out of the box. However, in D3 you’ll have to write extra code to do this.

Example:

I have created a column chart using some sample data. I’ve manually defined axes, tool-tips, data plots and chart cosmetics. This is a huge advantage when compared to other libraries where these things are predefined and you have limited configuration options.

See the Pen D3.js charting example by SitePoint (@SitePoint) on CodePen.

Highcharts

Screenshot of the Highcharts website

Highcharts is another popular charting library. It has a good collection of all the basic charts that you might need for an application. In addition to regular charts, it also offers stock charts and maps.

Pros:

  • Library Size: This is one of Highcharts’ biggest USPs. It’s light and fast. It supports all browsers, but performance varies depending on device/browser.
  • Community: Highcharts is open-source and free for non-commercial use. This has allowed it to build a vibrant community that is willing to help. So if you are ever stuck, you can get answers on StackOverflow or on their forum.
  • Price: They have a low starting price which makes it a nice option for small teams or single developer websites.
  • Browser support: This one is a major advantage of both Highcharts and FusionCharts. They are not limited to modern browsers and support all older browsers (including IE 6). So no matter who your audience is, you can be assured that your charts will work fine.

Cons:

  • Personal support: You will be fine in most situations, but if you ever hit an edge case or face a problem that nobody else has faced then help might be hard to come by. Highcharts provides pretty limited support even in their dedicated ‘maintenance and support’ plans. That can be a major decision factor if you are an enterprise or building something for an enterprise client.
  • Range of charts: Whether this point will affect you will again depend on your requirements, but Highcharts has a smaller collection of charts compared to FusionCharts.

Example:

I have created a polar chart where all three series are defined separately (line, area and column). You can configure the starting angle, ending angle, range and interval just by setting the corresponding properties. Notice how simple it is compared to D3?

See the Pen MwyRzj by SitePoint (@SitePoint) on CodePen.

Watch Visualizing Data with D3.js

Illustrate Your Data with JavaScript

FusionCharts

Screenshot of Fusioncharts website

FusionCharts started in 2002 and is now trusted by more than 85% of Fortune 500 companies. It offers four different packages—charts, widgets, maps and power charts—and you need only buy the type that suits your needs.

Pros:

  • Range of charts: When it comes to variety of charts, there is no match for FusionCharts. They offer 90+ charts and 965 maps. There is a good probability that the visualization you are thinking of is already present in the package.
  • Customizability and live examples: It is very easy to customize FusionCharts and include features which otherwise would take many lines of code in other libraries . They also have a huge gallery of ready made fiddles and business dashboards for inspiration and free download.
  • Wrappers and Plugins: FusionCharts offers official wrappers and plugins which are up to date. And since they are official, you are covered by their support. This is an advantage over Highcharts where wrappers are developed by community and not covered under their support.
  • Browser and device support: Works well across all browsers (including IE 6) and devices.
  • Advanced features: Apart from normal events and methods available in all charting libraries, FusionCharts differentiates itself by offering advanced features like an annotation engine, macros and visually editable charts right out of the box.
  • Personal support: This is a huge plus for me. I need to get solutions quickly whenever I am stuck and FusionCharts does a great job at it. In fact, they are quite proactive when it comes to helping their customers. Look at this mail I got when I downloaded their free trial. Now, how cool is that?
    Screenshot of a welcome mail from Fusioncharts

Cons:

  • Library Size: FusionCharts is a bit heavy if you compare it to other libraries. So that can be a problem in web-based applications, but won’t be as big an issue with intranet based apps.
  • Price: It is priced slightly higher when compared to Highcharts. So if price is a concern, then you might want to go with one of the other options.

Example:

I have created a box-and-whisker plot using some sample data. You can customize tooltips, theme and legend position just by setting the corresponding properties (as with Highcharts).

See the Pen Box-and-whisker plot by SitePoint (@SitePoint) on CodePen.

Conclusion

Now that you know the pros and cons of each library, let’s see when to use what:

  • If you want to build something that the world has never seen before and you have time in hand, go for D3.js.
  • If you are single developer or a small team, you should go for Highcharts (given it supports the charts you want).
  • If you are an enterprise or a growing business, FusionCharts would be your best bet considering its advanced capabilities (again, if it supports the charts you want).

These are not rules, but more of suggestions based on my experience. What do you think? Did I miss anything? Would love to learn more in the comments section below!

Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.
Is it good?Is it good?