CODEWITHSUNDEEP
highchartspie-chart
Sarah
Sarah

Reputation: 65

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

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 .

Upvotes: 0

Views: 365

Answers (2)

Akshay Shrivastav
Akshay Shrivastav

Reputation: 1227

An update to @ppotaczek answer, i added below if an else condition

if ( index === 0 || index > 5 ) {
    point.half = 0;
    point.labelPosition.alignment = 'left';
} else {
    point.half = 1;
    point.labelPosition.alignment = 'right';
}

Highcharts might provide this a default behavior but this worked for me perfectly since I had to display only a dataset of 10.

So I tried to display 50% on the left and 50% on right. Since the first index will have the highest value i gave a condition index === 0 to make sure that it does not over the annotation line on the left side and display just beside it

PN: Might be useful for someone

Upvotes: 0

ppotaczek
ppotaczek

Reputation: 39139

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

Upvotes: 1

Related Questions