how to label axis within radar chart with chart.js

Question

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, eg by using chart.js options?

Thanks in advance

Answer 1

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>