[Vuejs]-How to change labels axis position of dynamic data values that are showing around the chart. I'm using Highcharts here

by

0👍

✅

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`

0👍

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/chance@1.1.9/chance.min.js"></script>

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

Leave a comment