[GitHub] [echarts] Houstoten commented on issue #15654: Prevent overlapping elements

[GitBox <gi...@apache.org>]

Houstoten commented on issue #15654:
URL: https://github.com/apache/echarts/issues/15654#issuecomment-934307130


   Hi guys! Diving deep into legend & grid overlapping issue got this finally working. 
   
   This approach is not much tested and should have a lot of pitfalls. The solution I found is based on linear relationship of legend and Grid area (I found it some confusing). 
   
   Works for legend at the bottom of grid. Not tested for other layouts. Here `awesomeID` is a legend id.
   
       const legendY = echartsInstance._componentsMap["_ec_awesomeID_legend.plain"].group.y;
   
       const gridHeight = echartsInstance._coordSysMgr._coordinateSystems[0]._rect.height;
       const gridY = echartsInstance._coordSysMgr._coordinateSystems[0]._rect.y;
   
       const gridVerticalOffset = gridHeight - gridY - (legendY - SOMECONSTANTVALUE);
   
       setOption({
           grid: {
               bottom: gridVerticalOffset
           }
       });
   
   Don't know why, but `SOMECONSTANTVALUE = 80` works great for me with any chart width and any level of legend overlapping.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org