Hide axis and gridlines Highcharts

ChartsHighcharts

Charts Problem Overview


I am trying to hide the axis and gridlines of my Highcharts chart entirely. So far I have tried to set the width of the lines to 0, but it didn't work out.

xAxis: {
  lineWidth: 0,
  minorGridLineWidth: 0,
  lineColor: 'transparent'
}

Is it possible to just globally disable the axis lines/ticks and gridlines to create a "plain" plot?

Charts Solutions


Solution 1 - Charts

Just add

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}

to the xAxis definition.

Since Version 4.1.9 you can simply use the axis attribute visible:

xAxis: {
    visible: false,
}

Solution 2 - Charts

For the yAxis you'll also need:

gridLineColor: 'transparent',

Solution 3 - Charts

If you have bigger version than v4.9 of Highcharts you can use visible: false in the xAxis and yAxis settings.

Example:

$('#container').highcharts({
    
    chart: {
        type: 'column'
    },
    
    title: {
        text: 'Highcharts axis visibility'
    },

    xAxis: {
        visible: false
    },
    
    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    }

});

Solution 4 - Charts

you can also hide the gridline on yAxis as:

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}

Solution 5 - Charts

i managed to turn off mine with just

       lineColor: 'transparent',
       tickLength: 0

Solution 6 - Charts

If you doesn't want to touch the config object, you just hide the grid by css:

.chart-container .highcharts-grid {
   display: none;
}

Solution 7 - Charts

This has always worked well for me:

yAxes: [{
         ticks: {
                 display: false;
                },

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionalexView Question on Stackoverflow
Solution 1 - ChartsdgwView Answer on Stackoverflow
Solution 2 - ChartsZac MorrisView Answer on Stackoverflow
Solution 3 - Chartsonetwo12View Answer on Stackoverflow
Solution 4 - ChartsShweta BhagwatView Answer on Stackoverflow
Solution 5 - ChartsBenView Answer on Stackoverflow
Solution 6 - ChartsIran ReyesView Answer on Stackoverflow
Solution 7 - Charts0365ChrisView Answer on Stackoverflow