Highcharts column graph custom legend formatting not showing legend symbols - highcharts

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
}]
});
});

Answer 1

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/