How to remove the unnecessary overlaying gridlines using Chart.js?

Question

I have drawn a chart using Chartjs. I can explain the pixels I want to remove, but I think an image makes it a lot clearer:

Underneath is the code which generates this graph:

var options = {
    type: 'bar',
    data: {
        labels: ["1", "2", "3", "4", "5"],
        datasets: [
            {
                borderWidth: 2,
                borderColor: "#5d5d5d",
                pointBorderColor: "#5d5d5d",
                pointBackgroundColor: "#5d5d5d",
                pointBorderWidth: 5,
                type: 'line',
                data: [26, 26, 33, 28, 30],
                fill: false,
                lineTension: 0
            },
            {
                borderWidth: 3,
                pointBorderColor: "#b8b8b8",
                pointBackgroundColor: "#b8b8b8",
                pointBorderWidth: 10,
                type: 'line',
                data: [26, 26, 29, 28, 29],
                fill: false,
                lineTension: 0
            },
            {
                data: [0, 0, 0, 0, 0],
                fill: false,
                lineTension: 0
            }
        ]
    },
    options: {
        hover: {mode: null},
        legend: {
            display: false
        },
        tooltips: {enabled: false},
        hover: {mode: null},
        scales: {
            xAxes: [{
                gridLines: {
                    // drawBorder: false,
                },
            }],
            yAxes: [{
                display: false,
                ticks: {
                    suggestedMin: 0,
                    max: 60,
                    beginAtZero: true
                }
            }]
        }
    }
}

var ctx = document.getElementById(elementID).getContext('2d');
new Chart(ctx, options);

Does anybody know how I can remove those unnecessary overlaying lines using Chart.js?

Answer 1

You can use the following chart plugin to remove those unnecessary overlaying lines :

Chart.plugins.register({
   beforeDraw: function(chart) {
      var ctx = chart.chart.ctx,
         x_axis = chart.scales['x-axis-0'],
         topY = chart.scales['y-axis-0'].top,
         bottomY = chart.scales['y-axis-0'].bottom;
      x_axis.options.gridLines.display = false;
      x_axis.ticks.forEach(function(label, index) {
         var x = x_axis.getPixelForValue(label);
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 1;
         ctx.strokeStyle = x_axis.options.gridLines.color;
         ctx.stroke();
         ctx.restore();
      });
   }
});

ᴡᴏʀᴋɪɴɢ ᴅᴇᴍᴏ ⧩

 Chart.plugins.register({ beforeDraw: function(chart) { var ctx = chart.chart.ctx, x_axis = chart.scales['x-axis-0'], topY = chart.scales['y-axis-0'].top, bottomY = chart.scales['y-axis-0'].bottom; x_axis.options.gridLines.display = false; x_axis.ticks.forEach(function(label, index) { var x = x_axis.getPixelForValue(label); ctx.save(); ctx.beginPath(); ctx.moveTo(x, topY); ctx.lineTo(x, bottomY); ctx.lineWidth = 1; ctx.strokeStyle = x_axis.options.gridLines.color; ctx.stroke(); ctx.restore(); }); } }); var options = { type: 'bar', data: { labels: ["1", "2", "3", "4", "5"], datasets: [{ borderWidth: 2, borderColor: "#5d5d5d", pointBorderColor: "#5d5d5d", pointBackgroundColor: "#5d5d5d", pointBorderWidth: 5, type: 'line', data: [26, 26, 33, 28, 30], fill: false, lineTension: 0 }, { borderWidth: 3, pointBorderColor: "#b8b8b8", pointBackgroundColor: "#b8b8b8", pointBorderWidth: 10, type: 'line', data: [26, 26, 29, 28, 29], fill: false, lineTension: 0 }, { data: [0, 0, 0, 0, 0], fill: false, lineTension: 0 }] }, options: { hover: { mode: null }, legend: { display: false }, tooltips: { enabled: false }, hover: { mode: null }, scales: { xAxes: [{ gridLines: { // drawBorder: false, }, }], yAxes: [{ display: false, ticks: { suggestedMin: 0, max: 60, beginAtZero: true } }] } } } var ctx = document.getElementById('canvas').getContext('2d'); new Chart(ctx, options); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="canvas"></canvas>