how to hide highchart x - axis data values
I am drawing a bar chart using highchart.js
I do not want to show the x - axis data values.
Can any one tell me which option does it?
full config:
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
defaultSeriesType: 'bar'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: [''],
title: {
text: null
},
labels: {enabled:true,y : 20, rotation: -45, align: 'right' }
},
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high'
}
},
tooltip: {
formatter: function () {
return '';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
pointWidth: 35,
color: '#D9CDC1'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107]
}]
});
Solution 1:
In HighCharts, bar graphs use inverted axes, so the bottom axis is really the Y axis. (See also "column" graphs where the graphic is rotated 90 degrees, in which case the bottom axis is the X axis.)
You need to add the following to the yAxis config
yAxis: {
labels: {
enabled: false
}
}
See the following for full example: http://jsfiddle.net/k5yBj/433/
Solution 2:
To hide labels on X-axis set the option labels: {enabled:false}
like this:
.....
........
,
xAxis: {
categories: [''],
title: {
text: null
},
labels: {
enabled:false,//default is true
y : 20, rotation: -45, align: 'right' }
}
.....
....
To hide labels on y-axis set the option labels: {enabled:false}
like this:
.....
.......
,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high'
},
labels:{
enabled:false//default is true
}
},
.........
......
Refer the documentation for futher understanding.
Solution 3:
The above popular answer hides the labels only, this left tick marks for me which I also wished to remove.
In that case this works well
xAxis: {
visible: false
},
This is a simple solution to remove everything on the x/y axis for anyone interested. For more information please look here https://api.highcharts.com/highcharts/xAxis.visible