React highcharts, show legends as bar - highcharts

Question

This code is displaying the legends as circle, <<<
I want to display the legends as bar as shown in the below image.
My requirement is the legends should be displayed as bar instead of circles
Here you can take a look at my code:
Highcharts.chart('flow', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
width: 500,
height: 260,
style:{
marginBottom:"30px"
}
},
title: {
text: 'Flow',
x: 90,
y: 80,
style:{
fontSize:"25px",
fontWeight:600
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance:-30,
color:'white',
fontSize:'9px',
format: '{point.percentage:.1f} %',
style: {
textOutline: false
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
x: -100,
y: 90,
},
series: [{
name: 'Flow',
colorByPoint: true,
data: [{
name: 'Owned',
y: 74,
color:"#f5990f"
},{
name: 'Invited',
y: 36,
color:"#fce61e"
}]
}]
});
Highcharts.chart('flow', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
width: 500,
height: 260,
style:{
marginBottom:"30px"
}
},
title: {
text: 'Flow',
x: 90,
y: 80,
style:{
fontSize:"25px",
fontWeight:600
}
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance:-30,
color:'white',
fontSize:'9px',
format: '{point.percentage:.1f} %',
style: {
textOutline: false
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
x: -100,
y: 90,
},
series: [{
name: 'Flow',
colorByPoint: true,
data: [{
name: 'Owned',
y: 74,
color:"#f5990f"
},{
name: 'Invited',
y: 36,
color:"#fce61e"
}]
}]
});
I would appreciate any help that I can get to achieve this. Thanks!

Answer 1

You can create additional column charts and place them under the legend items:
chart: {
events: {
load: function() {
var columnChart1 = Highcharts.chart("columnChart1", columnChartOptions),
columnChart2,
xPos = this.legend.group.translateX,
yPos = this.legend.group.translateY,
items = this.legend.allItems;
columnChartOptions.series[0].data = [76];
columnChartOptions.series[0].color = 'yellow';
columnChart2 = Highcharts.chart("columnChart2", columnChartOptions);
columnChart1.renderTo.style.top = yPos + 50 + 15 + items[0]._legendItemPos[1] + 'px';
columnChart1.renderTo.style.left = xPos + 'px';
columnChart2.renderTo.style.top = yPos + 50 + 15 + items[1]._legendItemPos[1] + 'px';
columnChart2.renderTo.style.left = xPos + 'px';
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wsc4be92/