Highcharts - DataLabels connector customization {Straight line}

问题

I am using Highcharts...

How can I customize dataLabels line connector like below?

Tried with softConnector: false, but not getting the desired result though.

Any help highly appreciated as I am struck on this :(

Online Demo

Regular connector after using softConnector: false,

What I am expecting

回答1:

You can wrap pie.prototype.drawDataLabels method and inside this method you can change the parameters used by your connector.

This is a part you need to change:

connectorPath = softConnector ? [
          M,
          x + (labelPos[6] === 'left' ? 5 : -5), y, // end of the string at the label
          'C',
          x, y, // first break, next to the label
          2 * labelPos[2] - labelPos[4], 2 * labelPos[3] - labelPos[5],
          labelPos[2], labelPos[3], // second break
          L,
          labelPos[4], labelPos[5] // base
        ] : [
          M,
          x + (labelPos[6] === 'left' ? 5 : -5), y, // end of the string at the label
          L,
          labelPos[4], y, // second break
          L,
          labelPos[4], labelPos[5] // base
        ];

And here you can find an example how your chart will work with this wrap: http://jsfiddle.net/L6ywtj7z/5/

EDIT: After changes in Highcharts drawDataLabels method, it is possible to solve your issue much easier, using connectorPath method: http://jsfiddle.net/L6ywtj7z/15

来源：https://stackoverflow.com/questions/39382352/highcharts-datalabels-connector-customization-straight-line