How to remove padding from Pie Echarts?

Question

I've searched through all similar questions but I couldn't find a solution.

The Pie chart I've developed looks like below picture and I want to remove that empty space and force the chart to strech itself inside its container.

The config:

{
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  },
  radius: '100%',
}

CSS applied to:

width: 100%; // It doesn't matter I apply pixel width or percentage, empty space remains
height: 420px;

Seems as though your height is causing the space around, try height: 100vh instead — Who Me Dunno Mate, Dec 15 '21 at 08:38
Please share code snippet i.e. complete code `HTML` and `CSS` in order to understand properly. — Ishtiaq, Dec 15 '21 at 09:41
I have the same issue with the EChart Pie chart, have you found any solution? if yes then please share with me. — Harsh Patel, Jun 07 '22 at 10:19

score 2 · Answer 1 · answered Jul 26 '22 at 14:20

The only solution that I've found is this:

chartOption = {
  series: [
    {
      type: 'pie',
      top: '-20%',
      left: '-20%',
      right: '-20%',
      bottom: '-20%',
    }
  ]
}

After this you have to add specific css width and height to the DIV that contain the chart (width: 300px, height 300px for example). This will reduce the whitespaces of the container of the chart and leave just a security space for the emphasis when you will hover the chart. If you set the top, left, right and bottom keys with fixed values, you will have to make a precision adjustment in relation of the width and height that you set in the css. Not good! I've tried! The best way is to use the -20% value like I've sayed up.

Let me know if it works!

score 1 · Answer 2 · answered May 17 '23 at 12:37

1

Increase radius to reduce padding.

{
 name: "",
 type: "pie",
 color: colorPalette,
 radius: "90%", // Increase this percentage to reduce padding
}

answered May 17 '23 at 12:37

Mert

474
2
8
21

How to remove padding from Pie Echarts?

2 Answers2