避免 eCharts 中的图例重叠条形图

Question

I've using eCharts 3 by baidu to build a stacked bar graph but the legend always overlaps the graph. What I want to do is to move the graph to the left so the legend would have enough space and won't overlap the graph but I can't find the solution. This is my graph right now

Answer 1

I've just solved it! To handle the space for the graphs you have to tune the grid. Setting

myChart.setOption({
    grid: { 
    right: '17%'
     }
    });

Just made enough space to place the legend without overlapping it.

Answer 2

I work in angular and I solved it by separating the chart into 2 component, one is a component where I draw the legend by myself and one is to draw pie only using echarts. both are contained under a parent component having display: flex where I have flex-grow: 1 for the pie child component. this solved the responsiveness issue for me.