Hide axis and gridlines Highcharts

Question

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?

Here's [how to hide the yAxis](http://stackoverflow.com/questions/15277405/highchart-show-hide-an-y-axis-without-hiding-the-series) — Dan Dascalescu, Dec 10 '13 at 10:13

dgw · Accepted Answer · 2020-01-25T10:59:21.447

159

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

edited Jan 25 '20 at 10:59

answered Jun 04 '12 at 08:59

dgw

13,418
11
56
54

@dgw This makes the x-axis transparent, but it still occupies physical space under the data. Is there a way to give it 0 height as well? – Trevor Burnham Nov 04 '13 at 16:39
21

That's a bit overkill. HighCharts should implement a simple property called "visible" that would toggle whether an axis is displayed or not. I've posted that as a [feature request and you can vote for it here](http://highcharts.uservoice.com/forums/55896-general/suggestions/5164818-control-axis-visibility-show-hide-toggle-axes). – Dan Dascalescu Dec 10 '13 at 11:01
2

`minorGridLineWidth` was the obscure property I was looking for. Thanks! – jetcom Jun 12 '14 at 01:29
1

@TrevorBurnham - To remove the physical space that had tickmarks, you need to set chart.spacing = [0, 0, 0, 0] (or just set whatever axis, like chart.spacingLeft, to zero, if you don't want to eliminate all spacing). That was the missing piece for me for this question. – Matthew Dean Apr 10 '15 at 19:44
I can still see the axes in 3D! When options3d: { enabled: true }. – Cristian Scutaru May 08 '17 at 02:16
1

`tickLength: 0` seemed to be all I needed to hide the tick marks on my line chart. – Hartley Brody May 20 '20 at 13:50

score 83 · Answer 2 · edited Mar 23 '16 at 15:29

83

For the yAxis you'll also need:

gridLineColor: 'transparent',

edited Mar 23 '16 at 15:29

Jean-Paul

19,910
9
62
88

answered Sep 12 '13 at 12:29

Zac Morris

1,846
17
17

1

Do you also need to set the `title.text` to `null`? Anyway, HighCharts should just implement a simple property called "visible" that would toggle whether an axis is displayed or not. I've posted that as a [feature request and you can vote for it here](http://highcharts.uservoice.com/forums/55896-general/suggestions/5164818-control-axis-visibility-show-hide-toggle-axes). – Dan Dascalescu Dec 10 '13 at 11:01
setting `gridLineColor` to `transparent` may prematurely remove the grid lines if you still have other axes to remove. See [this example](http://jsfiddle.net/39xBU/54/). – Dan Dascalescu Dec 10 '13 at 11:08

score 30 · Answer 3 · answered Dec 02 '15 at 22:53

30

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
    }

});

answered Dec 02 '15 at 22:53

onetwo12

2,359
5
23
34

6

This is the best answer – micapam Apr 10 '17 at 04:54

score 22 · Answer 4 · answered Jan 08 '14 at 07:17

22

you can also hide the gridline on yAxis as:

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}

answered Jan 08 '14 at 07:17

Shweta Bhagwat

259
2
4

score 5 · Answer 5 · answered Jan 06 '15 at 23:30

5

i managed to turn off mine with just

       lineColor: 'transparent',
       tickLength: 0

answered Jan 06 '15 at 23:30

Ben

1,292
1
13
21

score 3 · Answer 6 · answered Mar 05 '15 at 14:38

3

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

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

answered Mar 05 '15 at 14:38

Iran Reyes

523
4
9

score -2 · Answer 7 · answered Aug 16 '17 at 06:57

-2

This has always worked well for me:

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

answered Aug 16 '17 at 06:57

0365Chris

1
1

Hide axis and gridlines Highcharts

7 Answers7

Linked