How Highcharts Won the Enterprise Data Viz Market

Although the graphing library's probably less famous than rivals like D3, big organizations swear by Highcharts for its ease of use, thorough documentation, and zealous devotion to cross-browser compatibility.

The web charting library Highcharts isn't widely known outside of data visualization circles, but it's used by organizations like IBM and NASA, the BBC and the Financial Times. Why? It's easy to use, well documented, and--most importantly--compatible with browsers from Internet Explorer 6 forward. That's a big deal, because IE compatibility hamstrings a lot of other sites and tools that work fine on Chrome, Safari, Opera, and Firefox. But that kind of cross-compatibility means extensive testing on all sorts of devices. Here's how they do it.

First, a primer on what Highcharts does. Developers can use it to add interactive elements, line and scatterplot graphs, as well as more a few more exotic visualizations like adding speedometer-style gauges to their website, by filling in the blanks in a JavaScript object which specifies everything from the chart margins to the formatting for the tooltips on the individual data points to the dataset itself.

Then, when a user visits the website, the library draws a chart to a specified element on the website, using SVG graphics or VML, the pre-SVG vector markup language used in older versions of Internet Explorer.

"When we first talked about it some four or five years ago, IE8 support was a big selling point," says Highsoft CTO Torstein Hønsi. "It's becoming less of a selling point now, but it's still very important because there's so many enterprise systems and in-house solutions than still run on IE8."

Big Time Testing

To make sure new versions of the software still work with browsers from the latest versions of Chrome and Firefox to IE6 to the native browser from Android 2.0, Highsoft runs an extensive series of tests before each release, Hønsi says.

"We run automated visual tests for the SVG-enabled platforms," he says. "We have a test suite of about 1,000 samples and we compare programmatically rendered version of the charts with the previous version of Highcharts."

The automated tests typically finish in a few minutes, but for other platforms, the company will often spend a day or two running manual tests and fixing regression bugs, he says.

"For VML and for different browsers, we don't do all the automated tests, but we do selected tests manually, so we have a recipe for manual testing like IE8, IE7, even IE6 and also mobile browsers," he says. "For each feature, like a certain touch gesture or a graphical visualization in legacy IE, we have a manual test."

And for each testable feature, the company also provides at least one complete demonstration in a JSFiddle online debugging environment so coders can experiment before deploy to their own sites, he says.

The extensive set of built-in options for basic charts and copious documentation makes Highcharts appealing to corporate customers, since it means new developers can more quickly get up to speed than with more abstract libraries like D3.

"Versus D3, Highcharts has a much lower entry point, so if you hire someone to create some charts on your website, then they will get started much quicker with HIghcarts than with D3," says Hønsi.

What Testing Gets You: Love

Media organizations praise the library for the same reasons: Journalist Malik Singleton tweeted last year that the "best time to master @Highcharts API is on deadline," and editors and producers from organizations from the Washington Post to Southern California Public Radio have blogged about using Highcharts to build visualizations for news stories.

More advanced developers can write more complex code, though, adding JavaScript code that gets called when users interact with points on the map or drawing graphical elements like lines, points, and arcs atop the chart.

An interactive mapping module for Highcharts, called Highmaps, is currently in beta--Hønsi says that despite the wealth of web-mapping toolkits already available, from Google Maps to Leaflet, mapping was one of the company's customers top requests.

"What our clients are saying is they don't want to use two different tools if they can do it with one," he says. "They prefer not to use another tool for the mapping, so we when we released a Highcharts map product it can also run side by side with Highcharts as a Highcharts module, which, of course, is much more efficient than learning two different libraries."

At the moment, the Highcharts JavaScript library needs to be installed on a customer's site and invoked through developer-written HTML and JavaScript. The library's free to use for noncommercial projects, with various license and support options available for commercial use.

But in the near future, Hønsi says, the company will be rolling out a cloud-hosted version of the tool that won't require any coding at all. Highcharts Cloud, currently in alpha, generates charts that can be embedded on a website or shared across social media, he says.

"We have created a beta now, which we launch in two weeks," he says. "We're also very, very close to coming up with a business model and a subscription model."

[Image: Flickr user Sebastien Bertrand]

Add New Comment


  • Great article, Steven.

    As you said, Highcharts is easier to use than D3. For standar and maps charts, is the best option you could choose.

    Highcharts with Angular JS is a very powerful mixing. I've used both of them in several projects, and the pros of use them together are less code to write, better page rendering and all the interaction features Angular JS offers.

    And, of course, if you are reading this and need help with your Highcharts project, you can contact me at http://snieto.com

    Thanks for this great post, Steven!