CODEWITHSUNDEEP
javascriptchart.js
Fabian Trottmann
Fabian Trottmann

Reputation: 224

how to label axis within radar chart with chart.js

I would like to label the axis within an chart.js radar chart differently. The axis are labeled with numbers from 1 to 5 (see print screen). I would like to have instead of 1 = "No", 2 = "Basic", 3 = "Proficient" etc.

enter image description here

Is that somehow configurable with chart.js in a radar chart, e.g. by using chart.js options?

Thanks in advance

Upvotes: 2

Views: 4794

Answers (2)

yellowsir
yellowsir

Reputation: 939

with the current version of Chart.js (4.4.7) the following option needs to be added:

{
scales: {
  r: {
    type:'radialLinear',
    ticks:{
      callback(v){
        return v;
      }
    }
  }
}

Upvotes: 0

tektiv
tektiv

Reputation: 14187

Since you are using Chart.js version 2.1.3, it will be very simple to achieve what you want.

In any chart (including the radar, the one you are using), labels on values are stored in options.scale.ticks.

Then, if you want to edit the way they are displayed, you must use Chart.js callbacks, like this :

var options = {
    scale: {
        ticks: {
            beginAtZero: true,
            userCallback: function (value, index, values) {
                // Default callback
                return value;
            }
        }
    }
}

Edit the return value with what you want.

Here is a jsFiddle, and also a fully working example using a simple array with the labels you want to display :

var ctx = document.getElementById("myChart").getContext("2d");

var notations = {
  0: "",
  0.5: "",
  1: "no",
  1.5: "",
  2: "basic",
  2.5: "",
  3: "proficient",
  3.5: "",
  4: "great",
  4.5: "",
  5: "outstanding",
}

var data = {
  labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
  datasets: [{
    label: "My First dataset",
    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: [3.25, 2.95, 4.5, 4.05, 2.8, 2.75, 2.0]
  }, {
    label: "My Second dataset",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    pointBackgroundColor: "rgba(255,99,132,1)",
    pointBorderColor: "#fff",
    pointHoverBackgroundColor: "#fff",
    pointHoverBorderColor: "rgba(255,99,132,1)",
    data: [1.4, 2.4, 2.0, 0.95, 4.8, 1.35, 5.0]
  }]
};

var myChart = new Chart(ctx, {
  type: "radar",
  data: data,
  options: {
    scale: {
      ticks: {
        beginAtZero: true,
        userCallback: function(value, index, values) {
          return notations[value];
        }
      }
    }
  }
});



console.log(myChart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Upvotes: 5

Related Questions