I tried suggestions from the Chat about how to affect the column labels on a polar chart (distance, align, x and y) but nothing seems to work, they never move, they aren't centered, they aren't conveniently positioned, and some overlap:
plotOptions :
{
series :
{
pointPadding : 0.01,
animation: false,
label: {
connectorAllowed: true,
},
dataLabels: {
enabled: true,
format: '<span>{point.name}</span>',
style: {
textShadow: false,
width: 20,
fontSize: "14px"
},
}
},
column:
{
dataLabels: {
enabled: true,
distance: -30,
align: 'center',
style: {
textOutline: 'none'
}
}
}
},
Edit:
If I add grouping : false, to column plotOptions I get columns that are centered within their categories, and they overlap. Their labels then make more sense, since they're also centered down the category "pie slice":
plotOptions :
{
column :
{
grouping : false,
dataLabels : {
enabled : true,
distance : 0,
align : 'center',
style : {
textOutline : 'none',
fontWeight : 'bold'
}
}
},
…
If I change chart type so it's regular column and not polar, the column labels are centered over their columns:
So the problem happens only when columns are displayed on a polar chart and they are grouped.
How can I control the position of column labels when columns (xAxis) are grouped so they don't overlap?


