JavaScript
Article

Choosing a JavaScript Charting Library: the Main Contenders

By Vaibhav Singhal

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!

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.

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!

  • reagent48

    How is the accessibility of any of these libraries?

  • http://madhur.github.com Madhur

    Where is google charts ?

  • Jeff

    I have tried so many times to get into d3. I really want to… But god is it complicated.

  • martynasma

    As far as the round-up of data visualization libraries goes, you have missed one key player – amCharts (www.amcharts.com)

    If you would try it, you would find that amCharts libraries are powerful, flexible, responsive and backed with superb support, plugins and documentation.

    • OphelieLechat

      Hey @martynasma:disqus — I notice you’re part of the amCharts team. Thanks for chiming in. Can you tell us specifically what’s better about your product?

      • martynasma

        I am. We usually refrain from public comparison and standoffs as it would look very “marketing” and not very useful to a reader of an analytic article such as this. With all due respect to the author, I just wanted to point out what he possibly have missed to take into consideration. We’ll be happy to work with him, should he want to update (and make it even more useful) the article.

  • Andréas Brey

    Yes no JS hosting and count almost 1Mb of JS+CSS download for Google Chart core functionalities

    • duniyadnd

      This! I end up losing a second just to load up a single choropleth map.

  • duniyadnd

    I’ve used highcharts many times, and their support is stellar. Their support resides in stackoverflow and that’s how it should be for most communities. I’m not sure what you were looking for when you were looking for support, and their response time is typically within 24 hours.

    • Eric

      I had the same experience, I don’t understand how he ended up with his conclusion :(

  • Eric

    nice article, but Highcharts actually has a good support (chat by skype, email , … ), your link doesn’t point to the right support link check that: http://www.highcharts.com/support

  • Eric

    I am still convince that HighCharts has a good support. They offer chat (skype), email and of course forums and a lot of doc.
    Your link doesn’t point to the right support link, check the right support link:
    http://www.highcharts.com/support

  • Patric

    Highcharts offers cloud service too

  • Mycoding mycoding

    ZingChart is a JavaScript charting library I use that eliminates the “cons” found in the libs compared above.

    No steep learning curve- CSS-like styling options and vanilla JavaScript

    Plenty of browser support (IE6+) with multiple render options – VML, SVG, Canvas

    Label management accomplished with flags, but also customization options (since each use case varies)

    Most charting libraries allow for chart export, and ZingChart does as well

    Support is highly available through email, social, and on-site chat. They also do custom development.

    Range of charts on par with High and Fusion (see https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks) and they keep adding more

    Library size is a tough comparison- if you want lots of features you’ll get a bigger file size. But that’s easily addressed with a custom build and anyone can do that — http://www.zingchart.com/docs/build-generator/

    Price: yeah its not free, but they have a lot of options available if your needs are not met by open source solutions.

  • Nomad

    Awesome!! I love D3 …. Could you do an article on D3 variants like nvd3 etc…?

  • Pete

    You have missed the ZoomCharts! ;) I’d say those have some impressive stuff there.
    http://www.zoomcharts.com

  • Mat

    Fusion charts is a dead thing, I doubt any sane developer could choose it. It’s heavy, non flexible library from last decade. This chart clearly shows who is who: http://www.google.com/trends/explore#q=highcharts%2C%20google%20charts%2C%20fusioncharts&cmpt=q&tz=

  • wazz

    you didn’t mention whether fusioncharts is free/os, just that it’s cheaper. that tells me they don’t have a free version.

  • Jeff

    Thanks for the suggesting! I’ll check it out.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.