score:2

Accepted answer

I would convert the data to be in the form of multiple series instead of one series, like this:

{
  series : [
    { name: "John", color: "#FF5733", data: [3, 0, 3] }
    { name: "Parker", color: "#009900", data: [5, 0 4] }
    .. etc ...
  ]
}

Then Highcharts will automatically use the person's name as the legend.

Here is a Fiddle to show what I mean.

I transformed the data to multiple series using this code:

var data = [];
var seriesLookup = {};
original.forEach(function(item){
  var series = seriesLookup[item.name];
  if(!series){
    series = {
      name: item.name,
      color: item.color,
      data: [0, 0, 0]
    };
    data.push(series);
    seriesLookup[item.name] = series;
  }
  series.data[item.x] = item.y;
});

Then I changed the tooltip.pointFormat to use series.name instead of point.name

tooltip: {
  headerFormat: '<b>{point.x}</b><br/>',
  pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},

I also used the dataLabels.formatter to ignore 0 values.

dataLabels: {
  enabled: true,
  color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
  formatter: function(){
    return (this.y!=0) ? this.y : "";
  }
}

score:0

You can also just set legendType: 'point':

series: [{
    legendType: 'point',
    data: [ ... ]
}]

Live demo: http://jsfiddle.net/BlackLabel/9kqLsfza/


Related Query

More Query from same tag