[Bug] Adaptive width/height of legend container

[Syedajabeen45]

Version

4.2.1

Link to Minimal Reproduction

https://codesandbox.io/s/47s59

Steps to Reproduce

1. Drag or minimize the resolution.
2. The legends present on the right side are overlapping on the graph.
3. There is no space between the legends and the graph.

Current Behavior

On reducing the resolution the legends on the side of the graph seem to overlap on the graph beside it, mostly in case of a pie chart. It happens both when the legends are aligned horizontally above the graph or placed vertically beside the graph.

Expected Behavior

We need our chart to adapt the height/width of the legends both vertical and horizontal type so that items doesn't overflow onto the graph area. Currently the only way is to hardcode a pixel/percentage value but it's not responsive.

Environment

- OS: Windows
- Browser: Chrome
- Framework: Angular

Any additional comments?

[Ovilia]

We would like to improve this, but it's not very clear yet how to be adaptive automatically. For example, like the case above, what is expected? A smaller size of pie series? Yes, the legend can go a little downside, but it will probably still intersect with the pie. Any idea?

[Syedajabeen45]

We would like to improve this, but it's not very clear yet how to be adaptive automatically. For example, like the case above, what is expected? A smaller size of pie series? Yes, the legend can go a little downside, but it will probably still intersect with the pie. Any idea?

In the above case, we do not need a smaller size of the pie series. That can be done by specifying the width. We basically want it to be responsive when we reduce the resolution of the browser, the legends intersect on the pie, so we want to avoid that. And what we want is when the browser size resolution changes, we do not want the legends to intersect the pie, we want them to be at a distance as it stays when it has full browser width.

[Ovilia]

Please check the responsive design.

[Syedajabeen45]

Please check the responsive design.

Hi Ovilia, went through the responsive design documentation and implemented the same in my code. But as soon as I add the media code for the graph options, the entire pie chart is going away(not displaying anything).

[Gusis93]

We would like to improve this, but it's not very clear yet how to be adaptive automatically. For example, like the case above, what is expected? A smaller size of pie series? Yes, the legend can go a little downside, but it will probably still intersect with the pie. Any idea?

I think what should happen in this situation is that the container grows instead of anything else getting smaller and position the legend in that space

[helgasoft]

@Syedajabeen45, the first example seems to work fine. Which one are you having trouble with?