I want to change the axis position of data label 6.02%. How do I change it because this data is dynamic. Here's my code :

   Highcharts.chart('container'   this.random, {
                credits: {
                    enabled: false
                },
                title: {
                    text: this.graphtitle,
                    align: 'left',
                    style: {
                        fontSize: '12px',
                    },
                },
                chart: {
                    height: this.graphheight,
                    width: 500,
                    animation: false,
                    backgroundColor: 'transparent',
                },
                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            color: '#000',
                            align: 'left',
                            format: '{point.y} %', // added percentage sign here
                            overflow: 'justify', // prevent labels from being cut off
                            distance: 10, // increase distance between labels
                            x: -40,
                            y: -20,
                            //css
                            style: {
                                fontSize: '10px',
                                textOutline: 0,
                            },
                            connectorWidth: 0,
                        },
                        animation: true,
                        showInLegend: true,
                    },
                },
                yAxis: {
                    labels: {
                        staggerLines: 2,
                        enabled: true,
                        align: 'left',
                        padding: 0,
                        reserveSpace: true
                    },
                },
                legend: {
                    layout: 'vertical',
                    verticalAlign: 'bottom',
                    align: 'right',
                    symbolHeight: 10,
                    symbolRadius: 0,
                    symbolPadding: 1,
                    itemMarginTop: 10,
                    itemMarginBottom: 5,
                    textOutline: 0,
                    itemStyle: {
                        fontSize: '10px',
                        textOutline: 0,
                    }
                },
                series: [{
                    enableMouseTracking: false,
                    type: 'pie',
                    innerSize: '65%',
                    colors: this.graphcolors,
                    data: this.graphdata,

                },],
           
            });
        },

below is the visual of pie chart:

I was trying this method but it's not working with my code any other method anyone would like to suggest ?

chart.series[0].data[1].update({
    dataLabels: {
        align: 'center',
        verticalAlign: 'middle',
        inside: true
    }
});

CodePudding user response：

I suppose graphdata here is dynamic data passed as a props. I came across a similar kind of bottleneck recently.

What I did to resolve this error is following:

You can sort your data ascending or descending using life cycle hooks e.g. getting the highest value element at 0 index or getting the lowest value element at 0 index.

data property of series in high charts expects a object with name and other custom properties to app where graph data has values like

['value 1', 1],
['value 2', 2]

         {
                  name: this.graphdata[0][0],
                  y: this.graphdata[0][1],
                  sliced: false,
                  selected: true,
                  dataLabels: {
                    x: -25,
                    y: -15
                  }
                },
               {
               name: this.graphdata[1][0],
               y: this.graphdata[1][1],
               sliced: false,
               selected: true,
               dataLabels: {
                 x: -60,
                y: -25
               }
              },
             this.graphdata[2],
          ],`enter code here`

CodePudding user response：

In your code, you put negative values for plotOptions.pie.dataLabels.x and plotOptions.pie.dataLabels.y. This is probably not the best strategy if you push data dynamically...

When you use setData() to update your series, Highcharts optimizes labels position automatically.

Here is a simple example:

let chart = Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      innerSize: '65%',
      dataLabels: {
        format: '{point.y}',
        distance: 10
      }
    }
  },
  series: [{
    colors: ['red', 'green', 'blue'],
    data: [10, 20, 15]
  }]
});

function getInt() {
  return chance.integer({ min: 1, max: 100 });
}

document.querySelector('button').addEventListener('click', () => {
  chart.series[0].setData([getInt(), getInt(), getInt()]);
});

#container {
  width: 350px;
  height: 350px;
}

<script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/chance.min.js"></script>

<div id="container"></div>
<button type="button">Update</button>