Search code examples
javascriptvue.jschart.jsvue-chartjs

Polar Area in Chart JS Rotates When Adding Labels


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?

Comparison Image

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 + "%";
            }
        },
    },
}

Solution

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