CODEWITHSUNDEEP
javascriptchart.js
anothershrubery
anothershrubery

Reputation: 21023

ChartJS radar scale points

I have a radar chart showing (nearly) as I want it. The only problem is that the scale should go up to 20 but, as you can see below, the highlighted point is 17 and is off the chart. How do I scale it so that the max point would be 20 and the shown highlighted point would be inside the chart?

enter image description here

The current code I have is:

var radarChartData = {
    labels: ["ATT", "SPD", "POW", "DEF", "STA", "TEC"],
    datasets: [ {
        scaleOverride: true,
        scaleSteps: 5,
        scaleStepWidth: 5,
        scaleStartValue: 0,
        pointLabelFontSize: 16,
        fillColor: "rgba(0,120,0,0.2)",
        strokeColor: "rgba(0,120,0,1)",
        pointColor: "rgba(10,10,10,1)",
        pointStrokeColor: "#ccc",
        pointHighlightFill: "#333",
        pointHighlightStroke: "rgba(255,255,0,1)",
        data: [12,15,17,16,11,13] 
    } ] 
};

I thought it would be the scaleSteps, scaleStepWidth and scaleStartValue options that would change this, but it doesn't seem to affect it.

EDIT: It doesn't seem to affect another set of data...

enter image description here

As you can see here the value of 17 does sit within the chart. The code for this one is:

var radarChartData = {
    labels: ["ATT", "SPD", "POW", "DEF", "STA", "TEC"],
    datasets: [ {
        scaleOverride: true,
        scaleSteps: 5,
        scaleStepWidth: 5,
        scaleStartValue: 0,
        pointLabelFontSize: 16,
        fillColor: "rgba(0,120,0,0.2)",
        strokeColor: "rgba(0,120,0,1)",
        pointColor: "rgba(10,10,10,1)",
        pointStrokeColor: "#ccc",
        pointHighlightFill: "#333",
        pointHighlightStroke: "rgba(255,255,0,1)",
        data: [19,17,15,6,16,15] 
    } ] 
};

What is the difference between the 2? The second one has a value of 19 for ATT but it sits within the chart just fine.

Upvotes: 1

Views: 10141

Answers (1)

anothershrubery
anothershrubery

Reputation: 21023

Ok, I figured out that I needed to move the scaleSteps, scaleStepWidth and scaleStart to the declaration of the new Radar chart as below, rather than in the dataset.

window.onload = function(){
var ctx = document.getElementById("radarCanvas").getContext("2d");
window.myRadar = new Chart(ctx).Radar(radarChartData, {
responsive: false,
    pointDot:false,
    showTooltips: false,
    scaleOverride: true,
    scaleSteps: 4,
    scaleStepWidth: 5,
    scaleStartValue: 0
}); }

See http://jsfiddle.net/7p8ffvqx/ for the working example.

Upvotes: 8

Related Questions