Chartjs-How can I show gridlines only of the even value ones withchartjs?

by

0👍

In order to only show gridlines for 20, 40, 60 and so on, you can define scale.ticks.stepSize: 20. To make the gridlines thicker, define scale.gridLines.lineWidth: 5 for example.

Please have a look at the following runnable code snippet.

new Chart(document.getElementById('myChart'), {
      type: "radar",
      data: {
        labels: ["Fifa20", "CS:GO", "Dota 2", "LOL", "Overwatch", "Fortnite"],
        datasets: [
          {
            label: "Games",
            data: [40, 45, 53, 45, 100, 13],
            backgroundColor: [
              "transparent",
              "transparent",
              "transparent",
              "transparent",
              "transparent",
              "transparent"
            ],
            borderColor: [
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)"
            ],
            borderWidth: 5,
            pointBorderWidth: 0,
            pointBorderColor: "transparent"
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scale: {
          ticks: {
            display: true,
            min: 0,
            max: 100,
            stepSize: 20,
            fontSize: 7,
            callback: function(value, index, values) {
              switch (value) {
                case 20:
                  return value;
                  break;
                case 40:
                  return value;
                  break;
                case 60:
                  return value;
                  break;
                case 80:
                  return value;
                  break;
                case 100:
                  return value;
                  break;
                default:
                  return "";
              }
            }
          },
          angleLines: {
            display: true
          },
          gridLines: {
            display: true,
            lineWidth: 5,
            color: "#cac7c7"
          },
          pointLabels: {
            fontSize: 16,
            fontStyle: "bold"
          }
        }
      }
    });
canvas {
  min-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="100" height="100"></canvas>

Leave a comment