Search code examples
echarts

Echarts responsive Grid and Legend

I am looking for a way to get the bounding box of the echarts (SVGRenderer) legend item to get the height.

I want to avoid an overlapping of legend and grid item.

Solution

  • I found a solution to get the position and dimension of the legend item. Related question in Github

    I am using LitV2 for the wrapping WebComponent. After finishing the rendering of the component I trigger a measurement function, which extracts the necessary information and updates the grid offset in the bottom.

        get legendBoundingBox() {
     const legendModel = this.chart.getModel().getComponent('legend');
     const legendView = this.chart.getViewOfComponentModel(legendModel);
     this.legendHeight = legendView.group.getBoundingRect().height;
     //this.options.grid.bottom = this.legendHeight; // Update chart options
    }