Charts: Force overflowing popupmenu legends

[spendker]

Is your feature request related to a problem or use case? Please describe. We are facing Design issue for donut which have the less character length. [e.g. {Component Name} has a problem when {...}]

Describe the solution you'd like Implement a feature that will force the popup menu legends to display regardless of the length of the text.

If the donut chart legends have the feature of popover which is having for longer text legends if it is also apply for less characters it will be looks good. [e.g. {Component Name} would work better if {...}]

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context

In the above pic if we get the popover design it will be really looks great. And what application do you work on? [e.g. {Infor XYZ}]

[ericangeles]

@tmcconechy @danielortiz1982 @inforandy I have spoken with both the homepages team and the content developers regarding this issue. This can help them resolving any issues that arise from data that cannot be handled within the component (UI per se). We can consider adding this task to the next sprint.

Also this one https://github.com/infor-design/enterprise/issues/7452

[tmcconechy]

@spendker I don't understand whats wanted here? You want an example that looks exactly like that design?

https://main-enterprise.demo.design.infor.com/components/pie/test-legend-below.html is similar but a pie instead of a donut.

Also bar charts can be just as clear and easy to position.

[ericangeles]

@SofiK can also give more information about this

[spendker]

@tmcconechy, the major problem I am facing in the widget is if more no.of legends in the bottom is occupying the more space because of this Actual donut chart is fit in less space. Ex:https://design.infor.com/code/ids-enterprise/latest/demo/components/donut/example-legend-bottom-single-widget.html

instead of this If I get the popover evrytime if the legends are more than one then the chart will looks better. Ex:https://design.infor.com/code/ids-enterprise/latest/demo/components/donut/example-legend-bottom-popup.html

[tmcconechy]

yes it sounds like you want https://design.infor.com/code/ids-enterprise/latest/demo/components/donut/example-legend-bottom-popup.html

Can you just implement that example on your end? Another thing you can do is change the size of the pie chart part to reduce space. To do that make a div where you put it and set height and width and the pie will size to that chunk.

[ericangeles]

@tmcconechy, one of the issues they're facing is the data that's being received from the API, which the developer has no control over. The data does not meet the required condition as specified in this line of code: https://github.com/infor-design/enterprise/blob/main/src/components/charts/charts.js#L494.

In case the users want to force the overflow, we can provide them with that option even if the condition is not met.

[tmcconechy]

ok i can see fixing the legend layout and the popup becoming automatic. Lets discuss when we groom

[danielortiz1982]

@tmcconechy and @ericangeles when you have a moment can you please update this issue with the designs. Ty.

[tmcconechy]

Should look like this https://main-enterprise.demo.design.infor.com/components/donut/example-legend-bottom-popup.html but forced via a setting. May want to clean up the padding/centering on bottom (looks uncentered ect)