CODEWITHSUNDEEP
highchartspie-chart
Reddy
Reddy

Reputation: 1497

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,

Original

What I am expecting

enter image description here

Upvotes: 2

Views: 2069

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

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

Upvotes: 3

Related Questions