search

krispo / angular-nvd3

AngularJS directive for NVD3 reusable charting library (based on D3). Easily customize your charts via JSON API.
http://krispo.github.io/angular-nvd3
MIT License
1.29k stars 377 forks source link

Custom 2 Lines Labels for Donut Chart Overlapping #737

Open arlener3 opened 6 years ago

arlener3 commented 6 years ago

I want to display customized 2 lines Labels outside the donut chart. I'm using the donutLabelsOutside as "true". I went through "How to create multiline label for pie chart with arrow mark" (https://github.com/krispo/angular-nvd3/issues/480) - http://plnkr.co/edit/ftXnRYd4STfYyitTNMa1?p=preview

*However in my data set the Key and Value are relatively lengthy values. I want to display the label as below: Line 1 --- > y Line 2 ----> Key - (Value as a percentage) However the labels seems to overlap.

With this example when i changed the data values also the overlapping issue is there. http://plnkr.co/edit/EKD43EFTugLHxOyIJ162?p=preview

I have modified the code, so that i can manually calculate the values to display the values.

Heres the plunker

http://plnkr.co/edit/3qcGEFYBvtQp5CSQbTYX?p=preview

It should display properly for any value that is there in the data.

Any solution for this ?

arlener3 commented 6 years ago

@krispo ? Any solution ?

arlener3 commented 6 years ago

Any idea?