Chartjs-Charts.js (2.9.4) Gridlines not displaying under Line Graph

by

1👍

This is because you set backgroundColor to white in your dataset, by default in v2 the fill is true and takes the backgroundcolor, in v3 by default the line doesnt get filled so you need to either provide a semi tranparant white backgroundColor or set fill to false as shown below

Example:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Points',
      data: [7, 11, 5, 8, 3, 7],
      borderWidth: 3,
      backgroundColor: 'white',
      borderColor: 'blue',
      fill: false
    }]
  },
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

Leave a comment