Chart.Js V2 - Hiding Grid Lines

Chart.js remove gridline

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>

How to remove grid on chart.js

I am now using version 2.0Alpha, same as you.

Updated Documentation Link

Below is an example for a simple bar chart without grid lines.

You need to set the 'gridLines' key on the y and xAxis keys of the options object.

window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
var barChartData = {        labels: ["January", "February", "March", "April", "May", "June", "July"],        datasets: [{            label: 'Dataset 1',            backgroundColor: "rgba(151,187,205,0.5)",            data: [100,99,98,97,96,95,94]        }]    };      window.myBar = new Chart(ctx).Bar({      data: barChartData,      options: {          responsive: true,          scales: {            xAxes: [{              gridLines: {                show: true              }            }],            yAxes: [{              gridLines: {                show: false              }            }]          }      }  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0-alpha/Chart.min.js"></script>
<div>  <canvas id="canvas"></canvas></div>

How to remove gridlines and grid labels in Chartjs Radar?

To remove/diminish grid-lines, you can set maxTicksLimit property of ticks to a number (amount of grid-lines - approx.) , like so :

scale: {
   ticks: {
      maxTicksLimit: 3
   }
}

BONUS: If you wish to remove all the grid-lines, setting maxTicksLimit to 0 will not work. Instead add the following in your chart options :

gridLines: {
   display: false
}

To remove grid-line labels (ticks), you can set display property to false for scale ticks , as such :

scale: {
   ticks: {
      display: false
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

let ctx = document.querySelector('#canvas').getContext('2d');let chart = new Chart(ctx, {   type: 'radar',   data: {      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],      datasets: [{         label: 'RADAR 1',         data: [3, 1, 6, 4, 7, 5, 4],         backgroundColor: 'rgba(0,119,204,0.2)',         borderColor: 'rgba(0,119,204, 0.5)'      }, {         label: 'RADAR 2',         data: [4, 2, 3, 6, 1, 7, 5],         backgroundColor: 'rgba(255, 0, 0 ,0.2)',         borderColor: 'rgba(255, 0, 0 ,0.5)'      }]   },   options: {      scale: {         ticks: {            display: false,            maxTicksLimit: 3         }      }   }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script><canvas id="canvas"></canvas>

how can i remove the grid lines in chartJs

You might check a chart.js sample. From there I found some deviations in the object setup of your example

        var config = {
            type: 'line',
            data: {
                datasets: [{
                    // Here starts your snippet
                }]
            },
            options: {
                // The options are outside of the datasets property
                scales: {
                    x: {
                        gridLines: {
                          display: false
                        }
                    },
                    y: {
                        gridLines: {
                          display: false
                        }
                    }
                }
            }
        };

Edit 1: updated the scales with the gridLines property

Chart.Js V2 - Hiding Grid Lines

Chart.js remove gridline

How to remove grid on chart.js

How to remove gridlines and grid labels in Chartjs Radar?

how can i remove the grid lines in chartJs

Related Topics

Leave a reply