Display data labels and connector lines to the right side of the pie chart - highcharts

Question

I am new to using highcharts. i am looking for a way to display the data labels and the connector lines to the right side of the chart below. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/pie-datalabels-connectorshape-function

in the above graph , if i try using the position axes for dataLabels, only the labels are shifted to the right , i want a way to display both the lines and labels to the right side of the graph, i am not sure how to override the connectorShape method to achieve this .

Answer 1

You can use Highcharts Series afterTranslate event and modify half and labelPosition.alignment point's properties. For example:

(function(H) {
  H.addEvent(H.Series, 'afterTranslate', function(e) {
    const series = e.target;

    series.points.forEach(point => {
      point.half = 0;
      point.labelPosition.alignment = 'left';
    });
  });
}(Highcharts));

---

Live demo: https://jsfiddle.net/BlackLabel/vqdt4hjy/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts