ChartJS remove vertical grid lines one on two

Question

I have the below ChartJS code and I would like to hide the grid vertical lines only and not the horizontal ones and keep only one vertical line per two like in the capture below:

image]1

Thanks.

<canvas id="line-chart" width="800" height="450"></canvas>

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
    datasets: [{ 
        data: [86,114,106,106,107,111,133,221,783,2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,502,635,809,947,1402,3700,5267],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,190,203,276,408,547,675,734],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [40,20,10,16,24,38,74,167,508,784],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [6,3,2,2,7,26,82,172,312,433],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    }
  }
});

Answer 1

Just add grid color as function in options for x axis scale and conditionally change the colors like its done below:

var chartInstance = new Chart(document.getElementById("chartJSContainer"), {
  type: 'line',
  data: {
    labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
    datasets: [{
      data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
      label: "Africa",
      borderColor: "#3e95cd",
      fill: false
    }, {
      data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }, {
      data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
      label: "Europe",
      borderColor: "#3cba9f",
      fill: false
    }, {
      data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
      label: "Latin America",
      borderColor: "#e8c3b9",
      fill: false
    }, {
      data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
      label: "North America",
      borderColor: "#c45850",
      fill: false
    }]
  },
  options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    },
    scales: {
      x: {
        grid: {
          display: true, //Make it false to remove all the vertical lines. 
          color: function(context) {
             if (context.tick.value %2 == 0) {
              return 'gray';
            } else {
              return 'white';
            }
          },
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>

Answer 2

I don’t really use chart.js so there may be a better way to do this. I think there may be a built in way to use a callback for this but I couldn’t figure it out. Here’s what does work.

Add this function at the top to create an array of alternating colors.

let colors = [];
function gridColors() {
  for (let i=0; i<10; i++) {
    colors.push("rgba(0,0,0,0)")
    colors.push("rgba(0,0,0,0.1)")
  }
}
gridColors()

And in your options add the following

options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    },
     scales: {
      x: {
        grid: {
          beginAtZero: true,
          color: colors,
        }
      }
    }
  }
});