How to minimize whitespace around Baidu's echarts

Question

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.

you dont make your poit clear, which chart do you mean ? there is many example in thair website which is not mach with your question — Kamyar Gilak, Jan 24 '15 at 09:49
My question applies to all charts. They all have the same structure. They have space for the title and toolbar and if you don't need them, the charts don't fill out that space. In my case I have my own title and toolbar outside the chart's div. — max.ott, Jan 26 '15 at 12:34

score 63 · Accepted Answer · edited Feb 04 '22 at 12:39

63

In ECharts 4, 5

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

https://echarts.apache.org/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.

edited Feb 04 '22 at 12:39

Kirell

9,228
4
46
61

answered Jun 21 '18 at 04:28

bjornl

1,757
3
17
29

At least it was only 20 mins @YegorZaremba -- I remember struggling with this detail for quite a while! – bjornl Jun 14 '20 at 08:49
2

The link is dead. New link, https://echarts.apache.org/en/option.html#grid – foxiris Dec 22 '21 at 08:56

score 8 · Answer 2 · edited Apr 12 '18 at 10:31

8

In ECharts 3 you can use the options grid.left, grid.top, grid.right and/or grid.bottom. According to the documentation, left and right default to 10%, and top and bottom default to 60 (px).

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

const option = {
  // these are the grid default values
  grid: {
    top:    60,
    bottom: 60,
    left:   '10%',
    right:  '10%',
  },
  // your other options...
}

edited Apr 12 '18 at 10:31

raphinesse

19,068
6
39
48

answered Aug 14 '17 at 00:45

sierrasdetandil

421
1
9
16

1

@David for pie charts you have to set `radius: '100%'` – Vic Sep 05 '18 at 02:15

score 7 · Answer 3 · answered Apr 10 '15 at 14:48

7

You can use the properties defined on the grid (x, y, x2 and y2). These properties are mentioned on the documentation: http://echarts.baidu.com/doc/doc-en.html#Grid

answered Apr 10 '15 at 14:48

arbc

567
6
7

2

This answer applies to ECharts 2. For ECharts 3, see https://stackoverflow.com/a/45666132/1819283. – sierrasdetandil Aug 14 '17 at 00:47

score 6 · Answer 4 · answered Sep 12 '16 at 13:58

6

Adding values to your themes grid object, like so:

var theme = {

    grid: {
        x: 40,
        y: 20,
        x2: 40,
        y2: 20
    }

}

answered Sep 12 '16 at 13:58

Silver Ringvee

5,037
5
28
46

2

Thanks for pointing me in the right direction. I've provided an updated answer for ECharts 4. – bjornl Jun 21 '18 at 04:28

score 0 · Answer 5 · answered Apr 09 '18 at 08:26

legend: {
padding: 0,
itemGap: 0,
data: [' ', ' ']
    },

In here we can just simply remove the padding of the legend. even though you are not specifying one, it is taking the default values. Unfortunately, eCharts doesn't give flexible option of setting chartArea through options. In google Charts you can mention it 100% and it'll cover all the available area. I tried the above mentioned work around and could cover a bit more space after that.

score -1 · Answer 6 · answered Jan 24 '15 at 09:45

-1

in Echart u can make chart/graph with combination of the chart, and thre is too many config for every charts section, like legend, etc... just have look at their api documantation on their web site and Example page (Combinations part)

answered Jan 24 '15 at 09:45

Kamyar Gilak

1,044
2
17
23

How to minimize whitespace around Baidu's echarts

6 Answers6

In ECharts 4, 5

Linked