How to show the remaining percentage of a bar in Highcharts?
I want to show the remaining percentage of the bar in gray, like in the picture 
so far i have tried this and could not find this type in the Highcharts documentation so please tell me how should i solve this with high standards documentation or jQuery
Highcharts.chart('Chart1Progress', {
chart: {
type: 'bar',
backgroundColor: null
},
title: null,
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
visible: false,
shadow: true
},
yAxis: {
min: 0,
title: null,
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
},
legend: {
enabled: false,
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'black',
borderColor: '#CCC',
borderWidth: 1,
shadow: true
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [{ y: 5, color: 'red' }, { y: 3, color: '#DDDF0D' }, { y: 4, color: '#55BF3B' }, { y: 7, color: '#5dacdf' }, { y: 2, color: 'pink' }]
}]
});
+3
source to share
1 answer
Highcharts.chart('Chart1Progress',{
chart: {
type: 'bar',
backgroundColor: null,
},
title: {
text: null,
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
visible: false,
},
yAxis: {
min: 0,
title: null,
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
},
plotOptions: {
series: {
stacking: 'percent'
},
bar: {
grouping: false,
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false,
align: 'right',
verticalAlign: 'top',
x: -30,
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'black',
borderColor: '#CCC',
borderWidth: 1,
shadow: true
},
series: [ {
name: 'Remaining',
data: [3, 5, 4, 1, 6],
borderWidth: 0,
color: "rgba(0,0,0,0)"
},{
name: 'Remaining',
data: [3, 5, 4, 1, 6],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
}, {
name: 'John',
data: [{ y: 5, color: 'red' }, { y: 3, color: '#DDDF0D' }, { y: 4, color: '#55BF3B' }, { y: 7, color: '#5dacdf' }, { y: 2, color: 'pink' }]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="Chart1Progress" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
You have to put stacking percentage and some data on the stack
+1
source to share