highcharts.js push line to the bottom of the charts when y values are all 0

Question

when the values of y axis are all 0, the 0 line runs at the middle of the chart which is not very good-looking. I want to push the 0 line to the bottom of the chart. I tried the solution on this post but not working

Highcharts: Ensure y-Axis 0 value is at chart bottom

http://jsfiddle.net/tZayD/58/

$(function () {
        $('#container5').highcharts({
      chart: {
                    type: 'column'
                },

                xAxis: {
                    categories: ['mon','tue','wed','thu','fri','sat']       
                },
                yAxis: {
                    title: {text: ''},
                    min:0
                },
                series: [{
                    name: 'Total Appts',
                    data: [0,0,0,0,0,0]
                }, {
                    name: 'Confirmed',
                    data: [0,0,0,0,0,0]
                }, {
                    name: 'no-shows',
                    data: [0,0,0,0,0,0]
                }]
            });          
    })

Answer 1

To make the 0 "yValue" appear at the bottom of a chart instead of floating in the middle of the chart space you need to set the yAxis.max value as well. Set it to some arbitrary value that is within you expected value range.

To remove the gridlines and just have the 0 "yValue" grid you can set the gridLineWidth to 0.

Sample:

        yAxis: {
            title: {text: ''},
            min:0,
            max: 10,
            gridLineWidth: 0
        },