CODEWITHSUNDEEP
chart.js
Thieu
Thieu

Reputation: 168

ChartJS disable gridlines outside chart area

I'm trying to hide the gridlines drawn outside the chart area, so basically like the option below, but for outside the chart area

gridLines: {
  drawOnChartArea: false,
},

exmpl

Upvotes: 4

Views: 1127

Answers (1)

timclutton
timclutton

Reputation: 13004

Presumably you are looking to disable the tick lines which can be achieved via the drawTicks property:

new Chart(document.getElementById('canvas'), {
  type: 'bar',
  data: {
    labels: ['a', 'b', 'c'],
    datasets: [{
      label: 'series1',
      data: [1, 2, 4]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          drawTicks: false
        },
        ticks: {
          padding: 10
        }
      }],
      yAxes: [{
        gridLines: {
          drawTicks: false
        },
        ticks: {
          beginAtZero: true,
          padding: 10
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas">

gridLines:
  drawTicks: false;
}

Refer to the documentation for further information.

Upvotes: 6

Related Questions