I need to remove the following encircled parts from my highcharts chart, one is the base line on the y axis and the other is the values label on the x axis. I've tried several things mentioned in the API but I haven't been able to achieve this yet.
fiddle http://jsfiddle.net/ftaran/jBHDM/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: null
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
labels: {
enabled: false
},
tickWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
},
"startOnTick": true
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ':</b> ' + this.y + '<br/>' + this.percentage.toFixed(2) + '%';
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Fail',
color: 'red',
data: [5]
}, {
name: 'Success',
color: 'green',
data: [2]
}]
});
});
To get rid of lines, you have to add these to your xAxis
config:
lineWidth: 0,
tickWidth: 0
And to get rid of the "Values" text, add this to your yAxis
config:
title: null
Here are the final configs and a link to the fiddle:
xAxis: {
lineWidth: 0,
tickWidth: 0,
labels: {
enabled: false
}
},
yAxis: {
labels: {
enabled: false
},
gridLineWidth: 0,
title: null,
"startOnTick": true
}
Highcharts can be confusing because which axis is the xAxis
or yAxis
can be not intuitive. Hope this helps!
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