I've been trying to figure this out for a while now. After adding labels to a polar plot, the lines and labels rotate slightly, while the actual data being plotted stays in the correct place, making the chart look a bit off. Tried removing every property from both the options and data objects, and it still rotates when I add the labels. Does anyone have a clue as to why this is happening?
This is my data and options objects:
type: 'polarArea',
data: {
labels: ["NORTH", "EAST", "SOUTH", "WEST"],
datasets: [{
data: [24, 22, 20, 18, 20, 23, 19, 10, 8, 6, 23, 17],
backgroundColor: 'rgb(255, 99, 132, 0.6)',
hoverBackgroundColor: 'rgb(230, 99, 132)',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scale: {
angleLines: {
display: true
},
pointLabels: {
display: true
},
ticks: {
beginAtZero: true,
callback: function (value) {
return value + "%";
}
},
},
}
I fixed this by updating chart.js from version 2.8.0 to 3.0.0-alpha. Still not sure why it did not work on the stable release.