Trim legends text and restrict legends to single line

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

Trim legends text and restrict legends to single line #654

Open anish-g-nair opened 7 years ago

anish-g-nair commented 7 years ago

Some of the legends have very long texts.

This pushes the legends to the next line, and also forces the chart from taking more height(more space taken by legends). Can I restrict the legends to a single line, and trim very long texts.

Have attached the screenshot - when legends have long text. Legends with long text Backup link: https://img42.com/fRHk2

What I am looking for is something like this. Single line legends, if texts are too long, trim it. Legends text's trimmed - Single line Backup link: https://img42.com/7iGj4

Please help.

MrSpark2591 commented 7 years ago

you could have done it using javascript only. var yourString ='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'; yourString = yourString.substr(0,10) + '...'; This will trim you option value in java script only.or try this one staggerLabels from : http://nvd3-community.github.io/nvd3/examples/documentation.html#multiBarHorizontalChart