5 reasons to use Highcharts (...and 5 reasons to choose D3)

5 reasons to use Highcharts (...and 5 reasons to choose D3)

by Peter Cook / 30 Jul 2018    

Highcharts and D3 are two of the most popular JavaScript libraries for visualising data. From one perspective they can be used to similar purposes, for example they are both great libraries for creating standard charts such as bar and line charts. However, their approaches are at opposite ends of the spectrum.

Highcharts is very much an ‘off-the-shelf’ charting library where you choose your chart, plug in your data and you’re good to go. D3 on the other hand provides building blocks which can be combined in countless combinations to produces exactly the type of chart you require.

This article looks at reasons for choosing one over the other.

5 Reasons to use Highcharts

Ready to go

We basically choose the type of chart we’d like and plug in our data. For example, to create a pie chart our code would look like:

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Slice of the pie'
  },
  series: [{
    data: [{
      name: 'Chicken',
      y: 40
    }, {
      name: 'Vegetable',
      y: 30
    }, {
      name: 'Fish',
      y: 20
    }, {
      name: 'Steak',
      y: 5
    }, {
      name: 'Other',
      y: 5
    }]
  }]
})

(See code on Codepen.) This gives us:

Highcharts pie chart

There’s even a nice animation when the chart loads.

Lots of chart types

Highcharts provides a large number of ready to use charts including common ones such as:

  • line
  • bar
  • pie
  • scatter

and less common ones:

  • area
  • sparkline
  • tile map
  • treemap
  • sunburst
  • parallel coordinates

The Highcharts website has a full list. As an example let’s create a sunburst chart:

var data = [{
  id: 'A',
  name: 'A',
  color: '#7FB069'
}, {
  id: 'B',
  name: 'B',
  color: '#E6AA68'
}, {
  id: 'A1',
  name: 'A1',
  parent: 'A',
  value: 50
}, {
  id: 'A2',
  name: 'A2',
  parent: 'A',
  value: 25
}, {
  id: 'B1',
  name: 'B1',
  parent: 'B',
  value: 100
}, {
  id: 'B2',
  name: 'B2',
  parent: 'B',
  value: 50
}, {
  id: 'B3',
  name: 'B3',
  parent: 'B',
  value: 25
}]


Highcharts.chart('container', {
  title: {
    text: 'Sunburst chart'
  },
  series: [{
    type: "sunburst",
    data: data
  }]
})

See code on Codepen.

Highcharts sunburst chart

Performance

Highcharts has a boost module which allows a lot more data to be rendered. It comes at the cost of some features (such as animation) but the trade off will be well worth it in situations where a great deal of data (e.g. 1 million data points) needs to be rendered.

Here’s an example where 100 line series are rendered, each containing 10,000 data points:

See the Pen Highcharts performance test by Frontend Charts (@frontendcharts) on CodePen.

Chart features

It’s easy to take for granted features such as tooltips, labels, legends and responsivity. If coding a chart from scratch (e.g. using D3) each of these features demand additional time and effort to implement. They come included with Highcharts and also have a good degree of customisation.

For example we can add annotations to a line chart using the annotations option:

annotations: [{
  labelOptions: {
    backgroundColor: '#777',
    borderWidth: 0
  },

  labels: [{
    point: {
      x: 312,
      y: 97
    },
    text: 'Blue peaks here'
  }, {
    point: {
      x: 414,
      y: 128
    },
    text: 'Black overtakes blue'
  }]
}]

Highcharts annotations

Image export

A commonly requested feature of web-based charts is the ability to download the chart as an image. This is a non-trivial feature to implement from scratch but Highcharts has a module for doing this.

It’s as simple as including the aforementioned module:

<script src="http://code.highcharts.com/6.0.0/modules/exporting.js"></script>

See code example.

A menu appears in the top right corner with options to download the chart as a PNG, JPG, PDF or SVG.

Highcharts export menu

Click on one of the formats and an image of our chart is downloaded:

Highcharts exported image

5 Reasons to choose D3

Expressiveness

D3 is more like a set of building blocks to help us build a chart or data visualisation from the ground up, rather than a library of pre-built charts. This means that there’s very little limit (besides what’s possible in a web browser) to what can be built with D3.

This is why some of the most impressive data visualisations on the web over the past years (such as in the New York Times) have been built using D3. For customised, bespoke and interactive data visualisations that stand out from the crowd, D3 is hard to beat.

NYT Tax chart

Free

D3 is completely free to use, unlike Highcharts which is non-free for commercial use.

Complete control

Creating a chart or data visualisation with D3 will give us complete control over appearance and interaction. Any aspect of the chart, be it the data series, axes, legends, tooltips or animations will be precisely controllable and there are very few worries about hitting any constraints. This is why it can be a lower risk proposition than using an off the shelf type charting library.

Componentised

As already mentioned, D3 can be thought of as a set of building blocks for helping build a chart or data visualisation from the ground up. Most often D3 will be used for most aspects of the visualisation, including positioning of data marks (bars, lines etc.), axes, transitions and DOM manipulation.

However we can also use D3 as a toolkit where we just use a handful of its powerful functions. For example, supposing we wanted to add a world globe to a React app. We can use D3’s geographic capabilities to parse a TopoJSON file, project it and convert into SVG path strings, but leave the final rendering to React:

function Map(props) {
  var projection = d3.geoOrthographic()
    .fitSize([props.size, props.size], props.geoJson)

  var geoGenerator = d3.geoPath()
    .projection(projection)

  let pathString = geoGenerator(props.geoJson)

  return <svg width={props.size} height={props.size} >
    <path d={pathString} />
  </svg>
}

d3.json('https://codepen.io/frontendcharts/pen/JBprpp.js', (err, json) => {
  let geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries)

  ReactDOM.render(
    <Map geoJson={geoJson} size={600} />,
    document.getElementById('app')
  )
})

See code on Codepen

React / D3 map

Cool examples

One of D3’s key strengths is the vast number of code examples that show off the capabilities of D3. The D3 website has a large gallery of examples and D3 creator Mike Bostock also runs a site called bl.ocks.org which hosts thousands of examples. It can get overwhelming, but it’s a great way to see what’s possible with D3 and to be able to delve into the underlying code.

bl.ocks.org

Summary

Hopefully this article has given you some insight into whether to choose Highcharts or D3 (or indeed, any other charting library). The key takeaway is that both libraries are very powerful and robust and will serve you well, provided you use them for their intended purpose. Highcharts is great for standard chart types, especially when you want to get something up and running with minimal effort. If you’re after something more bespoke where you can fine tune every little detail, then D3 is probably the way to go.