Echarts: How to remove bottom space in gauge chart

Question

I'm trying to implement a gauge chart using Baidu's Echarts. The grid properties applied to other charts are applied, but the bottom space is not removed in the gauge chart as shown in the figure below. Actually, the grid property removes the space in Bar chart, but this is not the case. I also applied radius(100%), but cannot be removed that.

My Typescript code is below. How should I remove the bottom space as shown in the picture?

Thank you.

Typescript:

  public chartOption: any;  

  getData( ){

    this.chartOption = {
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: -100 
      }, 
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 1,
          splitNumber: 8,
          radius: '100%', 
          center: ['50%', '50%'], 
          axisLine: {
            lineStyle: {
              width:10,
              color: [
                [0.25, '#FF6E76'],
                [0.5, '#FDDD60'],
                [0.75, '#58D9F9'],
                [1, '#7CFFB2']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '42%',
            width: 20,
            offsetCenter: [0, '-40%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 7,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#464646',
            fontSize: 10,
            distance: -60,
            formatter: function (value) {
              if (value === 0.875) {
                return 'GOOD';
              } else if (value === 0.625) {
                return '';
              } else if (value === 0.375) {
                return '';
              } else if (value === 0.125) {
                return ' BAD';
              }
              return '';
            }
          }, 
          title: {
            offsetCenter: [0, '-20%'],
            fontSize: 15
          },
          detail: {   
            fontSize: 20,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 100) + '%';
            },
            color: 'auto'
          },
          data: [
            {
              value: 0.7,
              name: 'Not Bad'
            }
          ]
        }
      ] }; 
  }

scss

  .graph-container {
    border: 2px solid #DDDDDD;
    width: 100%;
    height: 260px;
    position: relative;
    justify-content: center;
    align-items: center; 
  } 

HTML (Angular)

<div [options]="chartOption"  class="graph-container" echarts></div>    

Answer 1

One way is to make the height of the container half the chart's width and hide the overflowing part.

CSS:

#chart-container {
  position: relative;
  height: 250px;
  overflow: hidden;
}

Chart:

var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false,
  width: 500,
  height: 500,
});

Result:

CodeSandBox link: https://codesandbox.io/p/sandbox/echarts-gauge-wlr7lz

Answer 2

Just Add add the Below code in your chart options:

 grid: {
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true,
          },

check the url for reference: https://xieziyu.github.io/ngx-echarts/#/advanced/advanced-usage

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

Answer 3

I solved this problem by changing the 'radius' and 'center' property values like

~~

radius: '120%',

center: ['50%', '80%'].

~~