I am currently implementing the react-d3-speedometer library to create the gauge chart displayed below. However, I am facing an issue with reducing the gap between the gauge chart and the date. I have tried adjusting padding space, using mt or mb options in the class name, but so far, none of these solutions have worked.
<div className="col-auto mb-3" key={esp.id}>
<div className="card">
<h5 className="card-header">X</h5>
<ReactSpeedometer
id={"gauge-chart-" + esp.id}
fluidWidth={true}
minValue={0}
maxValue={40}
value={32}
valueFormat={'d'}
customSegmentStops={[0, 10, 20, 30, 40]}
segmentColors={['#a3be8c','#ebcb8b', '#d08770', '#bf616a']}
labelFontSize={'10px'}
valueTextFontSize={'28px'}
valueTextFontWeight={'500'}
paddingHorizontal={17}
paddingVertical={17}
currentValueText="#{value}˚C"
currentValuePlaceholderStyle={"#{value}"}
textColor={textColor}
/>
<p className="prog_temp text-secondary mt-1">30/10/2020 10:43:44</p>
<p className="prog_temp text-info mt-1">Temperature: 33˚C</p>
<button type="button" className="btn btn-outline-info btn-sm btn-block">Temperature Ajust</button>
<button type="button" className="btn btn-outline-success btn-sm btn-block">Status Ajust</button>
</div>
</div>
In my CSS file
.prog_temp {
text-align: center !important;
}
Are there any other ways, using CSS, that you would recommend to reduce this space?