palerdot/react-d3-speedometer

Segment Values overlapping each other

sanchay007 opened this issue · 3 comments

I tried to put segment values dynamically and in the case when they are close enough, the values on the speedometer are overlapping each other. Any solutions ?
Screenshot from 2021-02-11 01-01-40

There is no solution for this as of now. One way to solve this is to take some kind of config in customSegmentLabels like xPos, yPos ... still this will be very tricky to solve.

Any solution/suggestion is appreciated.

@sanchay007 @palerdot I faced a similar issue and handled it using CSS transform.
Example transform: rotate(0deg) translate(105px, 20px);

rotate(0deg) - will make that label horizontal align & to position it you can use x & Y position of translate(110px, -125px);