Chartjs-ChartJS: Is it possible to omit last grid line to save space

by

1👍

✅

You probably need to define a set of options in order to obtain the desired result.

  • scales.y.max
  • scales.y.ticks.callback
  • scales.y.grid.color

Please take a look at below runnable code and see how it can be done.

new Chart("chart", {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My Dataset",
      data: [5, 22, 34, 31, 42, 28, 45]
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        max: 46,
        ticks: {          
          stepSize: 10,
          callback: v => v > 40 ? '' : v
        },
        grid: {
          drawBorder: false,
          color: ctx => ctx.tick.value > 40 ? '#FFF' : '#DDD' 
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment