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

Share Improve this question Follow asked Jun 22, 2016 at 9:15 Fabian TrottmannFabian Trottmann 22444 silver badges1212 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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