When creating a stacking bar chart, I noticed that the rightmost 'box' does not have a border drawn on the right side.
Is there a setting or option in Highcharts that can be used to ensure the white border line is drawn around the 75% box in the image below?
You can view the jsfiddle I used for testing by clicking on this link: http://jsfiddle.net/zKgsF/
Note: Increasing the borderWidth property above 1 results in display, but the rightmost border appears thinner than the others. Please see the image below for reference.
Below is the javascript code used for the chart:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'rgba(0,0,0,.3)',
margin: [15,6,15,15],
},
xAxis: {
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
gridLineColor: "#FF0000",
labels:
{
align: 'right',
formatter: function()
{
return this.value + "%";
}
},
},
tooltip: {
formatter: function()
{
return "<b>" + this.series.name + '</b>: ' + this.y + ' (' + Math.round(this.percentage,1) + "%)";
}
},
plotOptions: {
bar: {
animation: false,
stacking: 'percent',
borderWidth: '1',
dataLabels: {
enabled: true,
color: 'white',
formatter: function() {
if (this.percentage < 10)
{
return ""
}
else
{
return Math.round(this.percentage,1) + "%";
}
},
style: {
fontSize: '18px'
}
}
}
},
series: [{
data: [30]
},{
data: [10]
}]
});
});
EDIT:
It seems that the issue is not related to the bar chart being "stackable". It may be linked to the fact that the chart reaches the maximum 'y' value axis... as depicted in another example here: http://jsfiddle.net/zKgsF/1/