Chart.js remove gridline

user_15379728 0
Viewed 2938

Stuck on a chart.js item as the docs don't seem to be particularly clear.

Simply trying to remove a gridline from the chart. I tried both the old syntax that was referenced here in Stack overflow:

options: {
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
        }
      }]
    }
  }

And the new syntax:

options: {
    scales: {
      y: {
        grid: {
          drawBorder: false
        }
      }
    }
  }

Neither work...

Here's my Snippet:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 10, 5, 8, 11]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
        }
      }],
      y: {
        grid: {
          drawBorder: false
        }
      },
    }
  }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<html>

  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</html>

chart.js javascript
3 Answers

The property you are looking for is called display instead of drawBorder, also your xAxes are defined in the wrong way, you were using v2 syntax instead of v3

Example: 

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 10, 5, 8, 11]
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          display: false,
        }
      },
      y: {
        grid: {
          display: false
        }
      },
    }
  }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<html>

  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</html>

user_86829830

Here is the solution.

Looks like lot of configuration has changed in the new version.

Reference from documentation here.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 10, 5, 8, 11]
    }]
  },
   options: {
     scales: {
      x: {
        grid: {
           drawOnChartArea:false
         }
      },
       y: {
        grid: {
           drawOnChartArea:false
         }
      }
    }
   }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<html>

  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</html>

user_64008150

I had the same problem and I solved it by setting the color of the gridlines to white like so:

  scales: {
    xAxes: [{
      gridLines: {
        color: '#ffffff'
      }
    }]
  }
user_150392730
Related