Search code examples
chart.jsreact-chartjsvue-chartjs

Is there anyway to hide the gridlines between ticks and chartArea in ChartJS?

Is there anyway to remove this overflowing section of the gridlines?

enter image description here

This is exactly what I'm looking for:

enter image description here

I've seen a few post from years ago with this question and none of them have really yielded any results. Those were so long ago that I pray that a fix has happened since then.

Cheers!

Solution

  • You can set tickLength to 0 in the grid options. To make the ticks still appear a bit away from the scale you can use the padding option:

    const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    scales: {
      y: {
        ticks: {
          padding: 4,
          crossAlign: 'far'
        },
        grid: {
          tickLength: 0
        }
      },
      x: {
        grid: {
          tickLength: 0
        }
      }
    }
  }
}

const 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/3.7.1/chart.js"></script>
</body>