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]
}]
});
To disable crosshair you just need to set this property to false. If you want to get rid of the labels on the axis you need to set xAxis. labels. enabled property to false.
I use : xAxis: { labels: { rotation: -45, align: 'top' }, categories: xAxisLabel }, for rotate the xaxis labels when number of labels are large.
The independent variable belongs on the x-axis (horizontal line) of the graph and the dependent variable belongs on the y-axis (vertical line).
A simpler way to go about this is using the tickInterval attribute: yAxis: { title: { text: 'Percent' }, tickInterval: 10, labels: { formatter: function(){ return this. value + '%'; } } }, That will force your axis intervals to show up as you requested.
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.
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/
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With