I have been working with some Chart.js and I have been trying to figure out how to remove the axis lines on a chart.
You can see the grid lines I am trying to remove in this image.
I have managed to remove the grid lines that appear within the chart where the data is represented, but I am having an issue removing these two lines.
You can see the chart.js I have created for the chart below.
var ctx = document.getElementById("volCause").getContext('2d');
var volCause_Doughnut = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: <?php echo $cause_label_json?>,
datasets: [{
backgroundColor: benefactoGraph_colours,
data: <?php echo $cause_value_json?>
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
},
}],
yAxes: [{
gridLines: {
display: false,
}
}]
}
}
});
Any suggestions would be much appreciated.
You need to set the drawBorder
property of grid-lines to false
in order to remove those axis lines, like so :
...
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
drawBorder: false //<- set this
},
}],
yAxes: [{
gridLines: {
display: false,
drawBorder: false //<- set this
}
}]
}
...