After trying to implement a gauge chart using Baidu's Echarts, I noticed that the grid properties applied to other charts are working fine, but the bottom space is not being removed in the gauge chart. Even after applying radius(100%), the space at the bottom persists as shown in the accompanying image.
Below is my Typescript code. Can anyone guide me on how to remove the unwanted bottom space?
Thank you.
https://i.sstatic.net/Ew9hi.png
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>