60
Views
3
Comments
Solved
[OutSystems Charts] How to set a fixed donut chart height
outsystems-charts
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.54.51 (Build 63195)
Platform Version
11.27.0 (Build 42539)

I'm using the Donut Chart widget to display different kinds of information, and the user choose what information to show. They do this by selecting a value in a dropdown, and the donut chart datapoint list updates on selecting a different value. However, these lists vary a lot in length, so the legend also has very different sizes for different values. I noticed that the height of the chart is for both the donut and the legend, so if the legend grows smaller then the donut grows larger. Is there a way to fix the size of the donut, so that the chart itself is the same size even if the legend changes? 

There is a 'height' attribute i can set, but this pertains to the height of the donut and the legend combined. There's also an 'inner size' attribute, but this only affects the size of the small circle inside the donut. I inspected the donut chart element in a browser, but I couldn't find out where the height was set and how to override that. Does anyone have a solution for this?

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Nils Kimman 

Have you checked the HighCharts documentation to see if those options exist?
If so, can you share an example so I can help do it on the platform?

Also, have you tried setting the Legend as being floating and Layout as vertical or proximate?

Cheers,
GM

2021-10-17 12-36-16
Amreen Shaikh

Hi Nils Kimman,

You can put the donut chart inside a container and set the height you want.


Reagrds,

Amreen

UserImage.jpg
Nils Kimman

Hi Amreen,

This does not work, as this still sets the height for both the chart and the legend. My problem is that the height distribution between the chart itself and the legend changes when the user selects different data. I'm thinking the solution will include a dynamic height based on the legend size, but I have no idea how to actually do that

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Nils Kimman 

Have you checked the HighCharts documentation to see if those options exist?
If so, can you share an example so I can help do it on the platform?

Also, have you tried setting the Legend as being floating and Layout as vertical or proximate?

Cheers,
GM

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