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.

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

Thanks in advance

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.

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

Thanks in advance

• javascript
• chart.js

• 1 Can you provide a jsfiddle? – Richard Commented Jun 22, 2016 at 9:19
• which version of chart js is this? – Quince Commented Jun 22, 2016 at 9:23
• I'm using version 2.1.3 – Fabian Trottmann Commented Jun 22, 2016 at 10:29

2 Answers 2

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.

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./ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

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