How to affect column label positions on a polar chart when grouping is enabled?

41 Views Asked by At

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:

Highcharts columns polar chart labels

        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":

Highcharts column polar chart grouped

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:

column highcharts with labels

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?

0

There are 0 best solutions below