Lines between labels and slices

[boygirl]

From @ekmartin on July 14, 2016 21:14

Would be nice if there was an option to enable indicator lines between the labels and the chart. Makes it a lot easier to see what labels belong to what slice.

Example (taken from react-d3):

Copied from original issue: FormidableLabs/victory-pie#106

[BrendanFDMoore]

I was surprised to discover this was not possible when looking at the label styling.

Can anybody speak to the place that might be appropriate for adding support for this in the code? Part of Pie vs part of Label etc.

Thanks!

[BrendanFDMoore]

Digging down, I think I'd start poking around the getLabelProps in victory-pie and perhaps add support for a connectingLine style, or something like that. https://github.com/FormidableLabs/victory-pie/blob/master/src/components/helper-methods.js#L55

Since we have the label x and y position and the chart center and outerRadius, we ought to be able to draw a line from the label to the chart when labelRadius > outerRadius.

[ngocht143]

How can we use @BrendanFDMoore ? Could you give a example?

[BrendanFDMoore]

Unfortunately I can't, @ngocht143 - sorry.

The above was my initial investigation to determine if it would be feasible to extend this functionality to meet a requirement.

I determined it should be possible to shoehorn in without too much trouble, but never actually did the work. We made the case for adjusting the requirements instead, so we no longer needed this capability.

Good luck! And if you do make the changes, I'd be happy to review the PR back to victory :+1:

[antonbehaeghe]

I'm trying to implement something like this with a custom LabelComponent. This component receives the x and y coordinates as props, but how do I go about positioning them correctly? I draw a line from the pie center to the x and y coordinates, but I want my actual label to be aligned with this. It also needs to be further away but I can't figure out the math for this. I've tried looking at the source for the label components and there seems to be a function the calculate the position, but I can't figure out what props it needs etc. Any ideas?

[DraGonM]

@antonbehaeghe I've made demo https://codesandbox.io/s/basic-victory-example-rfb7s

Things you looking for in Label and LabelLine, but this works only if you pass to chart width and height, otherwise you can't get the center point of the chart for lines calculation And also I'm not sure why for correct render of lines it is necessary to rotate line by 90 degrees, in the demo, in utils/math.js export const getXOffsetMultiplayerByAngle = angle => Math.cos(angle - 90 * radian)

Actually it will be cool if Chart by default passed coordinates of chart's center to Label

I hope this demo will help someone, who struggling with drawing lines from chart to labels

[carlaiau]

Beautiful @DraGonM thank you very much

[presdec]

Would love to see this implemented

[trancongdung12]

@DraGonM How to draw the line like that? Pls help me

[DraGonM]

@trancongdung12 Hey, I didn't work with charts for a long time, so it's not an ideal solution, but I think you can check this fork of the solution above https://codesandbox.io/s/basic-victory-example-forked-b090ed?file=/LabelLine.js

but basically, I just added one more point to <polyline> and played with some numbers for calculation, I hope this helps somehow.

[carbonrobot]

Polyline will be tracked #2820