在雷达中设置最小值、最大值和步数 chart.js

Question

I am using chartjs.org 2.2.1 and have a radar chart that has values between 1..5. I want to set the min value to 0 and max to 5 with a step of 1.

This seemed to be answered exactly here in this SO post . However my charts still have a weird scale and not the one that I have defined as per my code below.

Can anyone see what I am doing wrong here?

    var options = {
        responsive: false,
        maintainAspectRatio: true
    };

    var dataLiteracy = {
        labels: [
            @PointLabel("Literacy", 1), @PointLabel("Literacy", 2), @PointLabel("Literacy", 3),
            @PointLabel("Literacy", 4), @PointLabel("Literacy", 5)
        ],
        datasets: [
            {
                label: "Literacy",
                backgroundColor: "rgba(179,181,198,0.2)",
                borderColor: "rgba(179,181,198,1)",
                pointBackgroundColor: "rgba(179,181,198,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(179,181,198,1)",
                data: [
                    @PointValue("Literacy", 1), @PointValue("Literacy", 2), @PointValue("Literacy", 3),
                    @PointValue("Literacy", 4), @PointValue("Literacy", 5)
                ]
            }
        ]
    };

    var ctx = $("#chartLiteracy");
    var myRadarChart = new Chart(ctx,
    {
        type: 'radar',
        data: dataLiteracy,
        options: options,
        scaleOverride: true,
        scaleSteps: 5,
        scaleStepWidth: 1,
        scaleStartValue: 0
    });

Answer 1

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.

Answer 2

Set the value of stepSize

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

Answer 3

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

Answer 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",
      },
    },
 }

Answer 5

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 }, }, }, }