CODEWITHSUNDEEP
javascriptchart.js
TheEdge
TheEdge

Reputation: 9861

Set min, max and number of steps in radar chart.js

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
    });

Upvotes: 24

Views: 40832

Answers (5)

mbah
mbah

Reputation: 11

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

Upvotes: 1

Sveen
Sveen

Reputation: 426

Only this schema worked for me on v3.8.0

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

Upvotes: 9

JCH77
JCH77

Reputation: 1363

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

Upvotes: 18

Jeyenth
Jeyenth

Reputation: 492

Set the value of stepSize

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

Upvotes: 20

tektiv
tektiv

Reputation: 14187

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.

Upvotes: 46

Related Questions