Set spacing around Baidu eChart instances

Question

When making multiple charts with eCharts, the individual charts are spaced far apart from each other, with excessive whitespace:

I want to make the charts taller and push them closer together to make better use of the screen.

The question How to minimize whitespace around Baidu's echarts seems similar, but all the answers are focused on the grid approach to multiple charts. The problem with the grid approach is that while it spaces the charts nicely, eCharts doesn't give each chart its own legend or title in a grid, but instead makes a single legend at the bottom of the grid.

Other charting solutions (jscharting, Apex charts, chart.js) all use the same html setup more efficiently with minimal whitespace, so I don't think the problem is in the html/css. Here's the spacing for jscharting on the same page, for example:

I'd be happy either with an answer that explains how to reduce the margins around individual charts, or with one that explains how to give individual legends/titles to charts in a grid.

Answer 1

The workaround I’m using on this is to resize the chart so that it’s larger than the div it’s placed in. For a 200x300px div, I resize my charts to 260x385. You’d think that would make elements overflow, but at least on the browsers I’ve checked with it just makes them fit snugly.

    chart.resize({
        height:260,
        width:385
    }) ;  

I’d prefer a cleaner solution, if anyone has one.