[Feature] Chart increase size on hover gets cut due to container width

[ibrahimOcoder]

What problem does this feature solve?

We have implemented an on hover method to increase the radius of chart (snapshot attached). However, it gets cut due to container width and most importantly the overflow of auto generated div of echarts is hidden (snapshot attached). Is there any way to set it to visible and also set the same to the auto generated svg?

What does the proposed API look like?

We have fixed the issue by setting overflow to visible but just from inspect element. It would be good if you can provide any style property of it in series.pie.itemStyle or any other solution.

[mhamri]

look like the issue is with zrender lib, hardcoding the overflow:hidden. the lib should provide enough API to set these settings

https://github.com/ecomfe/zrender/blob/e6d458c1e7bfeeb1949b3462d3a7d48d8dea12fc/src/svg/Painter.ts#L72

[Ovilia]

This doesn't seem to be a problem with ECharts. If the chart has bigger radius on hovering, then you should probably decrease the default radius to make the hovered radius to be less than 50%.

[mhamri]

it's not an issue, but assuming the chart overflow should be hidden is limiting. There are cases that you want the chart to merge with the page, a good example of that are dashboards in mobile apps where you don't have a lot of space to put for padding, but at the same time you want the chart to take the full space.

…

On Wed, Aug 24, 2022 at 10:18 AM Wenli Zhang ***@***.***> wrote: This doesn't seem to be a problem with ECharts. If the chart has bigger radius on hovering, then you should probably decrease the default radius to make the hovered radius to be less than 50%. — Reply to this email directly, view it on GitHub <#17558 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACETIJ22YV6SIBNJWFXDUWLV2WA75ANCNFSM57LFH5NA> . You are receiving this because you commented.Message ID: ***@***.***>

[Ovilia]

If this is the case, you should set a bigger size for your container and use an outer container to control the overflow.

<div class="overflow: auto">
   <div id="chart-container" style="width: 110%; height: 110%"><!-- this is the dom you pass to ECharts --></div>
</div>

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!