javascriptjquerychart.jsradar-chart

set stepSize for radar chart


I have used this radar chart.js

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

    var options = {
          elements: {
            line: {
              borderWidth: 3
            }
          },
          scales: {
            r: {
              grid: {
                lineWidth: 4
              },
              angleLines: {
                lineWidth: 6
              },
              suggestedMin: 0,
              suggestedMax: 100,
            },                
          },            
        };

        var ctx = document.getElementById('myChart');

    var ChartData = {
      labels: [
        'Eating',
        'Drinking',
        'Sleeping',
        'Designing',
        'Coding',
        'Cycling',
        'Running'
      ],
      datasets: [{
        label: 'My First Dataset',
        data: [65, 59, 10, 21, 56, 55, 40],
        fill: true,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        pointBackgroundColor: 'rgb(255, 99, 132)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgb(255, 99, 132)'
      }, {
        label: 'My Second Dataset',
        data: [28, 48, 40, 19, 36, 27, 10],
        fill: true,
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        pointBackgroundColor: 'rgb(54, 162, 235)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgb(54, 162, 235)'
      }]
    };

  var myRadar = new Chart(ctx, {
    type: 'radar',
    data: ChartData,
    options: options
  });
</script>

I want to set the stepSize for ticks, so I included this in r section

  var options = {
          elements: {
            line: {
              borderWidth: 3
            }
          },
          scales: {
            r: {
              grid: {
                lineWidth: 4
              },
              angleLines: {
                lineWidth: 6
              },
              suggestedMin: 0,
              suggestedMax: 100,
            },

              ticks: {
                stepSize: 20, // the number of step
                }, 
           
          },             
        };

but it doesn't work and gives th fllowing error

Cannot determine type of '' axis. Please provide 'axis' or 'position' option.

how can i set stepSize for radar chart v.4.2.1?


Solution

  • Ticks object should be inside r

    var options = {
              elements: {
                line: {
                  borderWidth: 3
                }
              },
              scales: {
                r: {
                  grid: {
                    lineWidth: 4
                  },
                  angleLines: {
                    lineWidth: 6
                  },
                  suggestedMin: 0,
                  suggestedMax: 100,
                  ticks: {
                    stepSize: 20
                  }
                }
              },             
            };