Highcharts - issue with tooltip formatting in synchronized charts

Question

I am using synchronized charts using Highcharts, but I am having an issue with using the formatter function within the tooltip options. Each chart has different formatting requirements (% vs integer vs. float etc), but it seems to just take the last charts's formatting for each of the charts tooltips.

This was unexpected as I didn't have such issues for chart titles as well as y-axis formatting, which it picks up correctly. This is the code I currently have (abbreviated as it is quite lengthy otherwise):

for (var j = 0; j < json.data.length; j++) {

  $('#highchart_metric' + i + '_').highcharts({
    chart: {
      type: 'area',
    },
    title: {
      text: json.fmt[i].displayName,
    },
    xAxis: { // left out for brevity},
    yAxis: {
      labels: {
        formatter: function () {
          var label = this.axis.defaultLabelFormatter.call(this);
          return numeral(label).format(json.fmt[i].format);
        }
      }
    },
    tooltip: {
      formatter: function () {
        return moment(this.x).format("MMM Do[,] YYYY") + ': <b>' + numeral(this.y).format(json.fmt[i].format) + '</b>';
      }
    }
    series: [{ // left out for brevity }]
  });    
}

The json would be structured something along the lines of:

var json = {
  data: [[/* data */][/* data */]];
  fmt: [
  {
    col: "tfr",
    displayName: "TFR",
    fmt: "0,0.00"
  },
  {
    col: "volume",
    displayName: "Ticket Volume",
    fmt: "0,0"
  }
 ]
};

morganfree morganfree · Accepted Answer · 2017-05-17T13:00:23

It looks like it is the issue with incorrect use of a callback and a for loop. Each formatter callback creates a closure which has access to the same variable i - which, when the loop ends, is equaled to json.data.length.

Use a forEach kind of loop which will create a seperate i variable for each chart.

Compare forEach http://jsfiddle.net/9eezsx7v/ with for loop http://jsfiddle.net/9eezsx7v/1/

Highcharts - issue with tooltip formatting in synchronized charts

1 Answers