[Chartjs]-Set min, max and number of steps in radar chart.js

by

46👍

✅

You are right, but only if you are using Chart.js v1.x.

Ticks options have changed in v2.x (the one you are using).

If you want to edit radar ticks, you will need to edit the ticks attribute in your chart options :

var options = {
    scale: {
        ticks: {
            // changes here
        }
    }
};

From what you need (mak a scale from 0 to 5), you can either :

  • set the attribute beginAtZero to true and max to 5
  • set the attribute min to 0 and max to 5

You can see here the result.

18👍

Set the value of stepSize

scale: {
    ticks: {
        beginAtZero: true,
        max: 5,
        min: 0,
        stepSize: 1
    }
}

16👍

Starting ChartJS 3 the min/max scale values are not specified in scale.ticks but in options.scale or options.scales[id] object, example :

new Chart(hostElement, {
    type: "radar",
    data,
    options: {
        scale: {
            min: 0,
            max: 100,
        },
    },
});

https://www.chartjs.org/docs/latest/axes/radial/linear.html#linear-radial-axis :

scales.[x/y]Axes.ticks.max was renamed to scales[id].max
scales.[x/y]Axes.ticks.min was renamed to scales[id].min

https://codepen.io/JCH77/pen/abNymae

4👍

Only this schema worked for me on v3.8.0

 options: {
   maintainAspectRatio: false,
   scales: {
     r: {
       min: 0,
       max: 5,
       beginAtZero: true,
       angleLines: {
         color: "red",
      },
    },
 }

1👍

In chart.js V3 you can do this for the radar type:

  options : {
       responsive: true,
       maintainAspectRatio: false,
       scales: {
          r: {
          min: 0, // MIN
          max: 5, // MAX
          beginAtZero: true,
          angleLines: {
             display: true,
             // color: 'red',
          },
          grid: {
           circular: true,
          },
          ticks: {
           stepSize: 1, // the number of step
          },
        },
      },
     }

Leave a comment