Baidu ECharts2 dynamic chart position based on the legend height

Question

I'm using Baidu ECharts2 to visualise a dynamic amount of series (up to 100) as a line chart. The issue I face is the legend overlaps the graph in case if the series are too many.

I spent good 2 hours in searching the documentation and reading, but cannot figure out any way to set the graph position (y/y2 top/height).

It seems the chart consists of different elements (legend, toolbox etc), but none of them seems to be the graph itself.

An example I found showcases a fully responsive way to position pie charts, but this is not applicable in my case: https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/pie-media

I'd be grateful if someone has more experience with ECharts and can tell me way to move the graph down by y and set a height.

Thank you!

Answer 1

You can set grid position to make it.

In ECharts 2, you may set grid.y, grid.y2, or grid.height.

In ECharts 3, you may set grid.top, grid.bottom, or grid.height.

Answer 2

Your best option may be to set the legend type to scroll so it fits on one line.

legends.push({
    type: 'scroll',
    show: true,
    data: myData,
    ...
});

You may also be able combine Ovilia's and Zain's solutions to move the grid down to leave space for the legend. Unfortunately that would require a way to determine the legend's size before setting the chart's container size.