Chartjs-With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)

by

0👍

This is not possible in V2, in the new upcomming release of V3 you can do this. You have to adjust your logic slightly to

 return context.index % 7 ? 'red' : 'green';

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        gridLines: {
          color: (context) => {
            return context.index % 7 ? 'red' : // draw every seventh line red
              'green';
          },
          lineWidth: 2,
        },
        display: true,
        type: 'linear',
        position: 'right',
      }
    }
  }
}

var 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.0.0-beta.10/chart.js" integrity="sha512-7igYTuENB1pHNsZ/SyzMYrcJAmRCk084yVOsxNNCQAdX1wSYvCeBOgSOMC6wUdKMO76kCJNOpW4jY3UW5CoBnA==" crossorigin="anonymous"></script>
</body>

Leave a comment