@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.