Prevent overlap of grid and legend

[cbmurphy87]

Version

5.0.2

Steps to reproduce

As you add more series, the legend overlaps the grid. It does not make sense to hard-code margins for every graph. That makes it impossible to programmatically create graphs based on arbitrary data.

What is expected?

There should be a way to have the legend and grid resize appropriately based on the data in the legend. Another option would be to allow fixed sizes of each, but allow more than one row for a scroll style legend. This should be more dynamic rather than just fixed values.

What is actually happening?

The legend overlaps the grid.

[echarts-bot[bot]]

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 [email protected]. 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]]

@cbmurphy87 Please provide a 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.

[TuringLovesDeathMetal]

I've attached some example code chart_demo.txt that you can copy-paste into the JS editor in echarts examples here: https://echarts.apache.org/examples/en/editor.html?c=line-step

Here's what it looks like:

[sarimarton]

Hi, we're in the middle of migrating from highcharts, and this thing seems to be a show stopper :(. The apps are responsive, and horizontal legend blocks easily wrap into a higher height, flowing over the grid area. Highcharts handles this.

[TAgaroud]

Any updates on this issue? It's a really annoying bug in eCharts. The legend always overlaps the graph when it has more than 6 items. I know eCharts tried to fix it by introducing the scrolling option, but this doesn't work very well for us. In our case we use the horizontal scrollbar and the scroll is limited to one line of text only which forces the user to scroll a lot to see the entire legend.

Surely some reponsivness can be added to the legend by calculating the height of the graph and the legend and then dynamically changing the bottom of the grid to make everything fit nicely. Can this be done?

[dvago]

It would be good to have an update for this, @Ovilia would you be able to take a look at this issue? 🙏🏻 It seems like there are many engineers trying to solve this problem but looks like there is no one providing an official solution as well there's no efficient hack around it.

At a point in time there was someone suggesting to spawn 2 chart instances, one showing the chart and a second showing just the legend for the same data set to then control the responsiveness and the overlapping issue via CSS but there is no example nor documentation around it.

Thank you in advance for your kind work and time

[ob-ARC]

Same problem here - our users want to export a chart to image file, we thus need to set the legend from "scroll" to "plain", ptentially causing the overlap as described above.

[mateuslevisf]

+1 on what ob-ARC said. The 'scroll' legend style is useful for dynamic plots that are going to be rendered in the UI but pretty useless when you want to render a static image since you need to use the 'plain' option.

[iProGamer]

+1

[rodriguessdeyson]

+1 on what ob-ARC said. Any updates on this issue?

[murchelon]

Hi, im having the same issue. I've read about it and 1 suggestion I found is to draw the chart in 2 separate components: one for the chart and other for the legend.. and then draw the legend by yourself. That probbably solves it but, when trying to export the whole chart in a png, there will be issues adding the legend.

anyway, i love this component and thanks a lot for all the hard work!

[PaleNeutron]

Same issue, but we can manually set

{

    grid: {
      top: 80,
    },
    legend: {
      top: 40,
    },
}

to avoid this

[wong2win]

I used a NOT 100% accurate workaround which calculates legend width manually with measureText from canvas API. Don't forget the icon width and margin though.

It works fine until sometimes there is too much blank (in the end of every line) left to prevent word break, which would cause an unexpected new line. But you can do some round up and it should be fine.

[Adamatoma]

Hi everyone, I found a proper way after looked through all the issues and solutions refer to the "legend overlap element" problems. This solution leads to an ideal direction: https://github.com/lightdash/lightdash/issues/541#issuecomment-1157815376 And here's my final version:

const [legendHeight, setLegendHeight] = useState(0);
useDebounceEffect(
    () => {
        if (chartRef.current) {
            // @ts-ignore
            const found = chartRef.current._componentsViews.find((entry: any) => entry.type === 'legend.plain');
            const myLegendHeight = found?._backgroundEl.shape.height;
            chartRef.current.setOption({
                grid: {top: myLegendHeight},
            });
        }
    },
    [window_size.width],
    {wait: 200}
);

Cheers!