score:4

Accepted answer

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>

score:1

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'
      }
    }]
  }

score:1

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>


Related Query

More Query from same tag