I've been experimenting with creating radar charts using Chart.js. I have a good grasp on the basics, as shown in the simple chart below, but I'm looking to utilize the x y coordinates of the graph to position text directly on the canvas.
After some research, I discovered that it's not possible to use getValueForPixel or getPixelForTick in a radar chart. This limitation is discussed in this GitHub issue. In that discussion, a new method called getValueForDistanceFromCenter is proposed.
Based on my understanding, by calculating the distance from the center using this new method, we can obtain the necessary coordinates. Despite scouring through Chart.js documentation and other resources, I haven't come across any code samples or guidance on implementing this approach.
Could someone provide me some insight on how to integrate this method into my code?
var data = {
labels: ["Ball Skills", "Shooting", "Physical"],
datasets: [{
label: [`ikke`, `jij`],
backgroundColor: "rgba(38,120,255,0.2)",
borderColor: "rgba(38,120,255, 1)",
data: [90, 90, 90]
}]
};
var options = {
responsive: true,
tooltips: false,
title: {
text: 'Basic example',
display: true,
position: `bottom`,
},
scale: {
angleLines: {
display: true
},
ticks: {
suggestedMin: 0,
suggestedMax: 100,
stepSize: 25,
maxTicksLimit: 11,
display: false,
}
},
legend: {
labels: {
padding: 10,
fontSize: 14,
lineHeight: 30,
},
},
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'radar',
data: data,
options: options
});