Question

When I create a stacking bar chart, the rightmost ‘box’ doesn’t have the border drawn on the right hand side.

Is there an option or something that I can set in Highcharts to force the white border line to be drawn around the 75% box in the image seen below?

Here is a link to the jsfiddle I used for testing:
http://jsfiddle.net/zKgsF/

Please note: Setting the borderWidth property to higher than 1 works in displaying, but the rightmost border is much thinner than the others. See the image below.

Here is the javascript 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:

Looks like it’s not related to the bar chart being “stackable”. It might just be related to the fact that the chart goes to the max ‘y’ value axis… as seen here in another example: http://jsfiddle.net/zKgsF/1/

Answer 1

As suggested by Cubbuk, you can tweak it with by adding the max value of yAxis.

In addition, you can specify a endOnTick property too.

 max: 100.1,
 endOnTick: false

For API navigate here and for here is an example.