Chartjs-How can conditionally show/hide gridlines on the yAxis using Chart.js?

by

0👍

I didn’t understand why you want to use a callback to achieve what you’re looking for.

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.

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