How to label axis within radar chart with chart.js?

Member

by dedrick , in category: Javascript , 4 months ago

How to label axis within radar chart with chart.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by scotty_walker , 4 months ago

@dedrick 

To label the axes within a radar chart using Chart.js, you can use the scale option within the options object. Here's an example of how to add labels to the axes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var radarChartData = {
  labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"],
  datasets: [
    {
      label: "Dataset 1",
      backgroundColor: "rgba(220,220,220,0.2)",
      data: [65, 59, 90, 81, 56]
    },
    {
      label: "Dataset 2",
      backgroundColor: "rgba(151,187,205,0.2)",
      data: [28, 48, 40, 19, 96]
    }
  ]
};

var options = {
  scale: {
    angleLines: {
      display: true
    },
    ticks: {
      beginAtZero: true,
      max: 100,
      min: 0,
      display: true
    },
    pointLabels: {
      fontSize: 14
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
var myRadarChart = new Chart(ctx, {
  type: "radar",
  data: radarChartData,
  options: options
});


In this example, the labels array is used to specify the labels for each axis. The scale option within the options object is used to customize the appearance of the axes. The display flag is set to true for the angleLines and ticks properties to show the lines and tick marks for the axes. The pointLabels property is used to set the font size of the labels for each point.


Make sure to replace "myChart" with the actual ID of your canvas element.