javascript - Highcharts : hiding bottom-most x axis grid line - Stack Overflow

I am using Highcharts for one of my stock project. Everything is okay except I could not hide the bottom grid line in x axis as shown in the attached image.

Updates: Here is the fiddle link

I have the following properties in my javascript:

xAxis: {
            type: 'datetime',
            maxZoom: 30 * 24 * 3600000,
            tickInterval: 24 * 3600 * 1000,
            tickLength: 0,
            dateTimeLabelFormats: {
                day: '%e'
            },
            labels: {
                y: 24,
                style: {
                    fontSize: '1.6em',
                    fontWeight: 'normal',
                    fontFamily: 'standardCondensed',
                    color: '#bcbdbd'
                }
            },
            plotLines : [{
                value : (function() {
                        // To Do ...
                    })(),
                color : '#39484d',
                dashStyle : 'solid',
                width : 32,
                label : {
                    text : ''
                }

            }]
        },
        yAxis: {
                title: {
                text:   ''
            },
            opposite: true,
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color:  '#808080'
            }],
            labels: {
                format: '${value}',
                y: 20,
                style: {
                    fontSize: '2em',
                    fontWeight: 'normal',
                    fontFamily: 'standardCondensed',
                    color: '#bcbdbd'
                }
            }
        },

Is there a way to hide that line but display the months numbers at the bottom?

I am using Highcharts for one of my stock project. Everything is okay except I could not hide the bottom grid line in x axis as shown in the attached image.

Updates: Here is the fiddle link

I have the following properties in my javascript:

xAxis: {
            type: 'datetime',
            maxZoom: 30 * 24 * 3600000,
            tickInterval: 24 * 3600 * 1000,
            tickLength: 0,
            dateTimeLabelFormats: {
                day: '%e'
            },
            labels: {
                y: 24,
                style: {
                    fontSize: '1.6em',
                    fontWeight: 'normal',
                    fontFamily: 'standardCondensed',
                    color: '#bcbdbd'
                }
            },
            plotLines : [{
                value : (function() {
                        // To Do ...
                    })(),
                color : '#39484d',
                dashStyle : 'solid',
                width : 32,
                label : {
                    text : ''
                }

            }]
        },
        yAxis: {
                title: {
                text:   ''
            },
            opposite: true,
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color:  '#808080'
            }],
            labels: {
                format: '${value}',
                y: 20,
                style: {
                    fontSize: '2em',
                    fontWeight: 'normal',
                    fontFamily: 'standardCondensed',
                    color: '#bcbdbd'
                }
            }
        },

Is there a way to hide that line but display the months numbers at the bottom?

• javascript
• highcharts

Share Improve this question Follow edited May 22, 2014 at 16:42 jeewan asked May 22, 2014 at 16:27 jeewanjeewan 1,60555 gold badges2424 silver badges4141 bronze badges 3

• I will make a guess here and say it has to do with the width or dash style? If those don't work, change the color to blend in with the background. - make a fiddle with some sample data and i will mess with it. – Jordan.J.D Commented May 22, 2014 at 16:32
• I am making a fiddle, I will post my fiddle asap. – jeewan Commented May 22, 2014 at 16:33
• Here is the fiddle I just made jsfiddle/vgaJd I need to hide all the horizontal grid lines but no the numbers. – jeewan Commented May 22, 2014 at 16:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here is a fiddle with your solution. You needed to add:

            lineColor: 'transparent',

To each axis.