Highcharts column graph custom legend formatting not showing legend symbols

Question

I'm trying to create a simple column chart using Highcharts. I want to be able to show legends at the bottom with legend symbols having same color as bars followed by the value and category. For some reason, I only see the first legend symbol. Here is the source https://jsfiddle.net/DeanSharma/gjbfj0rg/

$(function() {
  var categories = ["Open","Expire within 90 days","In Progress","Past"],
     colors = ["#1097ae","#81cbd6","#b4d66c","#317fc2"],
     data = [9,13,7,8];
  var chartData = [{y: 9, color: '#1097ae', name: 'Open'}, {y: 13, color: '#81cbd6', name: 'Expire within 90 days'}, {y: 7, color: '#b4d66c', name: 'In Progress'}, {y: 8, color: '#317fc2', name: 'Past'}];
    var customLegend = '<div class="legend" style="vertical-align: bottom; background-color: transparent">';
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column',
      height: 400,
      marginBottom: 100,
      align: 'top'
    },
    title: {text:'My Custom Column Chart', align:'center', style:{"font-size":'14px',"color":'#0000ff'}},
    colors: colors,
    legend: {
      align: 'center',
      enabled: true,
      floating: true,
      symbolWidth: 0,
      labelFormatter: function() {            
        for(index=0; index< categories.length; index++) {
          customLegend    += '<div style="background-color:' + colors[index]  + ' ; width:12px; height:12px;"></div>';
          customLegend    += '<div class="legend__value">' + data[index] + '  </div>';
          customLegend    += '<div class="legend__name">' + categories[index] + '  </div>';
          customLegend    += '<br />';

        };
        customLegend += '</div>';
        return customLegend;
      },
      layout: 'horizontal',
      verticalAlign: 'bottom',
      y: 10
    },
    credits: {enabled: true, text: 'Courtesy DeanS', href:'stackoverflow.com'},
    xAxis: {
      categories: categories,
      labels: {autoRotation: false, 
        style: {color: '#777',fontFamily: 'Open Sans',fontSize: '10px'}
      },
      lineColor: '#f8f8f8',
      tickColor: '#f8f8f8'
    },
    yAxis: {
      title: {
        text: '',
        useHTML: true
      }
    },
    series: [{
      data: chartData    
    }]

  });
});

morganfree morganfree · Accepted Answer · 2017-03-07T21:32:52

To achieve that result you do not need a custom legend. You can split your points into seperate series, disable grouping and then in the label formatter - return the point's value and the category.

plotOptions: {
  series: {
    grouping: false
  }
},
series: data.map((point, i) => {
  return {
    data: [
      [i, point]
    ]
  }
})

Legend config:

 legend: {
  labelFormatter: function() {
    return data[this.index] + ' ' + categories[this.index];
  },
  layout: 'vertical',
},

example: https://jsfiddle.net/gjbfj0rg/1/

Highcharts column graph custom legend formatting not showing legend symbols

1 Answers