Menu
If you want to hide gridlines in Chart. js, you can use the above code. Yor will have to 'display: false' in gridLines object which is specified on the basis of Axis. You can use 'xAxes' inside scales object for applying properties on the x-axis.
The chart legend displays data about the datasets that are appearing on the chart.
Charts are graphical representations of numerical data. It is possible to switch between different representations of an existing chart, by changing the Chart Type in the Chart Properties: General page.
I found a solution that works for hiding the grid lines in a Line chart.
Set the gridLines color to be the same as the div's background color.
var options = {
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
or use
var options = {
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
}
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
From version 3.x, onwards use this syntax. Refer to chart.js migration guide: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
scales: {
x: {
grid:{
display:false
}
},
y:
{
grid:{
display:false
}
}
}
If you want them gone by default, you can set:
Chart.defaults.scale.gridLines.display = false;
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