Suggestion: Scaling the chart down when there is overlap with the legend

I used to work with Highcharts, but switched to ECharts. And even with Chinese documentation, it’s way easier to use, so nice job!

Though there is one function I miss in ECharts, and that is setting the legend to not overlap the chart, by automatically scaling the chart down when there is overlap.

I’ve created a jsfiddle to illustrate what I mean: http://jsfiddle.net/gw7gwyqv/2/

See what happens when you resize the chart window? The chart gets larger/smaller to prevent overlapping with the legend. This is a really nice feature I think.

I don’t know if this will be easy to implement (probably not…), but maybe you can add something like: options.legend.overlap: (boolean)

---

Also, the legend overlaps with the toolbox too, which should not happen in any case, right?

[pissang]

Hi Jeffery, glad to hear you like echarts and can work with it easily. We will have English doc soon.

About the overlapping problem, we knew it’s really annoying. And we have discussed if there is a way to get the layout done automatically to avoid overlap. Not only between the chart and legend, but also many other components like toolbox. But sadly we haven’t found a elegant way to achieve that.

And I think the chart is the most important in the view so it is not a good way to avoid overlapping by scaling the chart. Maybe it’s better to render the legend outside with html and let css do the complicate layout job. Like the following code

option: {
    legend: {
        // Not show the legend, instead rendering it with html
        show: false,
        data: ['Quatro', 'Esmee'],
        selected: {
            'Quatro': true,
            'Esmee': true
        }
    }
};

$el1.click(function () {
    chart.setOption({
        legend: {
            selected: {
                Quatro: false
            }
        }
    });
})

[pissang]

Yes, agree with that it has a lot of work that developer should not concern. Maybe we can provide a legend extension which is rendered with HTML and CSS instead of canvas