highcharts minPointLength do not work for unstacked bar chart

Question

I am working with an unstacked bar chart when the data is all zero. The yAxis in the middle is a straight line when the data length smaller than or equal to 4, when the data length is bigger than four the yAxis become a dashed line. If I add 'stacking': normal to the series to make the bar chart a stacked bar chart, the yAxis is always a straight line. See the fiddle

http://jsfiddle.net/junkainiu/u6sgyxL6/5/

html

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

js

$(function () { $('#container').highcharts({ chart: { type: 'bar', }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [0,0,0,0], stacking: 'normal' }] }); });

and

http://jsfiddle.net/junkainiu/bz22h3eb/7/

html

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

js

$(function () { $('#container').highcharts({ chart: { type: 'bar', }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [0,0,0,0,0], }] }); });

to see the difference. In highcharts, the default minPointLength is zero, but it doesn't seem to work in unstacked bar charts. So I would like to make the yAxis a straight line no matter it is a stacked chart or unstacked chart. Is there a way to do this？ Thanks

Answer 1

The key problem here is that the gaps are caused by the empty bars. It seems that Highcharts is trying to show the 0 value bars, even though they should be invisible.

Try setting a plot band to draw a solid line along the base of the y-axis:

yAxis: {
    plotBands: {
        from: 0, to: 0, borderWidth: 1, borderColor: '#CCCCCC', zIndex: 10
    }
},

You can to set the band to go from 0 to 0 and set the border width so it effectively becomes a line. The zIndex property will ensure that it stays above the gaps.

This will remove those gaps along your axis line (see an updated version of your fiddle: http://jsfiddle.net/brightmatrix/bz22h3eb/11/).

Note: The attribute plotLines will achieve the same effect, however, that will cause a type error ((d.plotLines || []).concat is not a function) once you start to define data for the bars. It seems plotLines is meant for line and spline charts!

Here's a screenshot of the edited chart:

Does this help to solve your issue?