201
Views
5
Comments
Solved
[OutSystems Charts] Donut Chart - Display Full Legend
outsystems-charts
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Is it possible to fully expand the legend of a donut chart vertically?  So that all the elements of the legend are displayed, rather than having to use the default method of using the arrows to page through the different values, if there is a large number?


donutlegend.png
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Jeff,

this is automatic behaviour of the highcharts component to deal with the available space.  So if you tinker with this, it should be well tested with different data sets and devices, to make sure there's no unexpected behaviour.

You can augment the available vertical space with the height property of the chart, and you can also disable the option of the legend adjusting.  Only disabling is not the answer, as it might push up your chart out of view.

see attaced oml for some experimenting.

this is my attempt at tailoring the height of the chart to the number of legend items, you'd have to finetune exact calculation.  The reason I do this is to avoid an excessively high empty chart in case there are less options.

this is how you disable the mechanism of automatic pagination :

Good luck,

Dorine

rwDemoLegendNavigation.oml
UserImage.jpg
Jeff Weyant

Thanks Dorine, works great!

2018-09-27 18-20-33
Swatantra Kumar
Champion

Clean implementation, Dorine.

2021-09-06 15-09-53
Dorine Boudry
 
MVP


Dank voor het compliment Swatantra,

dat doet deugd

2025-07-22 10-24-12
Lakshmi Kumar Yadav

Hi Jeff,

This might be the issue because of height size.

Please try by increasing the height value.


Hope this helps you !!

Regards,

LK

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Jeff,

this is automatic behaviour of the highcharts component to deal with the available space.  So if you tinker with this, it should be well tested with different data sets and devices, to make sure there's no unexpected behaviour.

You can augment the available vertical space with the height property of the chart, and you can also disable the option of the legend adjusting.  Only disabling is not the answer, as it might push up your chart out of view.

see attaced oml for some experimenting.

this is my attempt at tailoring the height of the chart to the number of legend items, you'd have to finetune exact calculation.  The reason I do this is to avoid an excessively high empty chart in case there are less options.

this is how you disable the mechanism of automatic pagination :

Good luck,

Dorine

rwDemoLegendNavigation.oml
UserImage.jpg
Jeff Weyant

Thanks Dorine, works great!

2018-09-27 18-20-33
Swatantra Kumar
Champion

Clean implementation, Dorine.

2021-09-06 15-09-53
Dorine Boudry
 
MVP


Dank voor het compliment Swatantra,

dat doet deugd

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.