I have searched through the net with no success on how to solve this. I have seen people use a background image but that seems lazy and unhelpful. I want to move the labels to a 45 degree angle so it looks more professional.
My chart currently looks like this -
But I am wanting it to look like this -
Anyone have any ideas on how I can do this?
Copy of my code is underneath.
new Chart(DummyChart, {
type: "polarArea",
data: {
labels: ["Dummy1", "Dummy 2", "Dummy 3", "Dummy 4"],
datasets: [
{
data: [125, 375, 300, 240],
backgroundColor: "#57C5C8",
borderWidth: 4,
hoverBorderColor: "white",
label: "Dummy Dummy "
}
]
},
options: {
cutoutPercentage: 20,
legend: {
display: false
},
layout: {
padding: 0
},
scale: {
ticks: {
max: 450,
maxTicksLimit: 1,
display: false
},
angleLines: {
display: true
},
pointLabels: {
display: true
}
},
plugins: {
datalabels: {
display: false
}
}
}
});
Here's my solution with the datalables plugin.
https://jsbin.com/bigedugasi/1/edit?html,js,output
I have updated my previous solutions to make the chart responsive.
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
anchor: 'start',
align: 'end',
offset: 0 // Gets updated
}
},
onResize: function() {
let width = document.getElementById("pie-chart").width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset = width/2-padding
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With