Hide axis and gridlines Highcharts
ChartsHighchartsCharts 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;
},