Customizing Highcharts

At Tapad, we have a lot of data, but rather than go into the details about the amount of data, I want to talk about how we make sense of it all. In particular we recently built new pages in our UI that include metrics and visualizations about all the data we collect. We’ve tried a couple different graphing libraries, but we’ve found that Highcharts works the best for our needs.

When we first started building custom metrics, we immediately went for D3.js. The D3 homepage has great examples showing off the amazing things you can build with D3. It’s amazingly powerful with things like force directed graphs and collision detection built in. These complex visualizations, while stunning, are often not the best way to convey information. Sometimes a simple list of numbers is the clearest way to communicate information. Because of D3’s flexibility and power, it’s lacking a dead simple setup for basic graphs, like bar charts and line charts.

While Highcharts doesn’t have the built in physics like D3, it is incredibly simple to set up either basic or more advanced charts such as expandable column charts. Highcharts level of customization further sets it apart from the other options. You have complete control of the tooltip, placement of the data and can even render any text as HTML instead of SVG for even more fine grained control.

Setting up a chart is done by passing values and functions to a JSON object. To create a two series line graph:

var options = {
title: {
  text: 'Monthly Average Temperature',
  x: -100
},
xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
               'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
  name: 'Tokyo',
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
  name: 'New York',
  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}]};

$('#container').highcharts(options);

That’s easy to set up, but let’s style the tooltip. The shared option makes a joint tooltip for all series instead of just the highlighted point. It’s useful when you want to precisely compare data across series.

options.tooltip = {
  backgroundColor: "rgba(177, 196, 207, 0.7)",
  crosshairs: true,
  valueSuffix: "°C",
  shared: true
};

This is a fine start to customizing the tooltip, but let’s change the position. Most positionable elements in Highcharts work by setting x and y, which are the offset from the original position, but the tooltip takes a positioner property. Positioner is a function that returns an object with an x and y property. The useful thing about using a function, instead of just numerical properties, is that the function has access to input arguments and this.chart.

options.tooltip.positioner = function(width, height, point) {
  return {
    x: Math.max(this.chart.plotLeft, point.plotX - (width*3/4)),
    y: (this.chart.plotTop + 25)
  }
};

In addition to fine grained customization of the position of the tooltip, we also have complete control over the content. The useHTML property can be used on most text, such as title and labels, and Highcharts will include classes so that you can add additional styling. Tooltips have the formatter property though, which allows you to build the tooltip from scratch with HTML and gives you access properties, like this.percentage and this.x.

options.tooltip.useHTML = true;
options.tooltip.formatter = function() {
  var tooltip = "<span style='display: inline-block; width: 100px;'>";
  var tooltip = leftSpan("Month:") + rightSpan(this.x) + "<br/>";
  for (point of this.points) {
    tooltip += tooltipLine(point.series.name, point.y);
    tooltip += "<br/>";
  }
  tooltip += "</span>";
  return tooltip;
};

function leftSpan(text) {
  return "<span style='float: left;'>" + text + "</span>";
}

function rightSpan(text) {
  return "<span style='float: right;'>" + text + "</span>";
}

There we go! It’s just the tooltip, but the same idea applies for most other elements. The complete example can be found at https://jsfiddle.net/rvthb412/6/.

While this barely scratches the surface of Highcharts, it gives you an idea of the level of customization you can do to all parts o f the chart. To learn about all the different customizations and options, go to http://api.highcharts.com/highcharts. To checkout out the huge variety of charts that can be built with Highcharts and more detailed examples, go to http://www.highcharts.com/demo.