CODEWITHSUNDEEP
javascriptjquerycsschartshighcharts
kaboom
kaboom

Reputation: 307

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

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]
                }]
            });          
    })

Upvotes: 0

Views: 524

Answers (1)

wergeld
wergeld

Reputation: 14442

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
        },

Upvotes: 1

Related Questions