How to minimize whitespace around Baidu's echarts

max.ott picture max.ott · Jan 21, 2015 · Viewed 14.1k times · Source

I'm trying to incorporate Baidu's echarts (which look really good). However, there is a lot of whitespace around the actual graph when one doesn't set a title nor uses their toolbar. Is there a way to have the graph/chart use more of the canvas?

My current solution to add an extra inside the container one and then set it's width and height to be be bigger by the margins I want to remove and the offset it by setting 'top' and 'left' to negative values of the respective margins. Not elegant and more importantly, not robust, but it works for the moment.

Answer

bjornl picture bjornl · Jun 21, 2018

In ECharts 4.X

As mentioned by some other posters, the correct way to get rid of the whitespace is to change options.grid.

https://ecomfe.github.io/echarts-doc/public/en/option.html#grid

grid: {
  left: 0,
  top: 0,
  right: 0,
  bottom: 0
}

In ECharts 4, the names of the grid properties have been changed to left, right, top, and bottom.

Thanks to the answers above for pointing me in the right direction!

Further, changing the option.legend, as suggested above, had no effect on my chart.