search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.23k stars 19.61k forks source link

Legends at the bottom of graphs #14724

Open robertjorg opened 3 years ago

robertjorg commented 3 years ago

Version

5.0.2

Reproduction link

https://github.com/robertjorg/legend-overlap

Steps to reproduce

I tried recreating with 5.2 but eCharts was giving me errors when trying to run. I was able to recreate the issue on the examples and have attached a github project displaying the issue.

Create a chart with a large legend section.

What is expected?

The legend should move to the bottom of the graph and expand how much space is at the bottom of the graph.

What is actually happening?

The legend will overlap with the actual graph when multiple lines in the legend are present. You are able to fix this by expanding the bottom size of the grid.

We have a need to have dynamic legends. It would be nice if the legend would attach the top of the legend to the bottom of the graph and expand the bottom of the grid accordingly.

echarts-bot[bot] commented 3 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

echarts-bot[bot] commented 3 years ago

@robertjorg Please provide a minimum reproducible demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , https://www.makeapie.com/editor.html or https://codesandbox.io/s/mystifying-bash-2uthz.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

robertjorg commented 3 years ago

Here is a link to a codepen: https://codepen.io/jorgensra/pen/xxgmdvW

Ovilia commented 3 years ago

We are discussing about avoiding components overlapping. This is not only for legend and is a big feature which is still at discussion stage.

robertjorg commented 3 years ago

@Ovilia Thank you for letting me know. Will this ticket be updated when/if decisions are made? Or is there another one I should follow?

Ovilia commented 3 years ago

@robertjorg Following this issue would be sufficient. :)

github-actions[bot] commented 1 year ago

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.

robertjorg commented 1 year ago

Just checking on this issue. Has there been any update. It is rather old and I saw on my example if I update to eCharts version 5.4 the issue is still happening. Thank you.

laurenwalker commented 1 year ago

Just adding another data point that this is an issue I am experiencing as well and would love a solution. I anticipated that setting the legend height and padding and prevent the legend from overlapping with the other chart components, but it seems to have no effect.

I am able to prevent this issue by setting the grid top or bottom properties to a pixel amount larger than the legend overlap. But it would be great if setting the legend height to auto would automatically do this kind of spacing.

RafaelCENG commented 1 year ago

Any updates about this? image

bottom : 0,
left: 0,
orient:'vertical
RafaelCENG commented 1 year ago

Hello any updates about this issue?

erenkan commented 6 months ago

any update?

akenverus commented 4 months ago

bump

ktschmincke commented 2 months ago

Will join the chorus to say I'm looking for this as well, but wanted to make a distinction. I actually don't want the chart to auto detect the height of the legend and make room for it. Instead what I want is for the legend to extend down past the container. In other words I don't want the graph size to change at all. I have graphs that may change the number of series data that exist and I want the chart size to stay static while the legend can continue to grow.

This would mean changing the height of the container itself. Another solution might be to allow me to render the legend in a separate element from my main graph? Not sure if that would be possible or not.