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