Javascript 如何以水平方式显示最小值和最大值？

我正在使用

react-d3-speedometer

套装作为速度表。我能够实施它。但我需要以水平方式显示最大值和最小值

代码

import React, { Component } from 'react';
import ReactSpeedometer from "react-d3-speedometer";

export default class GaugeChart extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <React.Fragment>
            <ReactSpeedometer
                maxValue={7000}
                value={7000}
                valueFormat=".1s"
                needleColor="red"
                startColor="#ffc7ba"
                segments={630}
                maxSegmentLabels={1}
                endColor="#FF471A"
            />
        </React.Fragment>
    }
}

import React，{Component}来自'React'；
从“react-d3-车速表”中导入react车速表；
导出默认类GaugeChart扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回
}
}

当前视图

预期视图

---

使用下面的样式并添加到CSS文件中

 <style>
    text.segment-value:nth-child(1){
          font-size: 16px !important;
        font-weight: bold;
        fill: unset !important;
        transform: rotate(0deg) translate(-105px, 20px); 
     }

        text.segment-value:nth-child(2){
          font-size: 16px !important;
        font-weight: bold;
        fill: unset !important;
        transform: rotate(0deg) translate(105px, 20px);
        } 

</style>

文本.段值：第n个子项（1）{
字体大小：16px！重要；
字体大小：粗体；
填充：未设置！重要；
变换：旋转（0度）平移（-105px，20px）；
}
文本.段值：第n个子项（2）{
字体大小：16px！重要；
字体大小：粗体；
填充：未设置！重要；
变换：旋转（0度）平移（105px，20px）；
} 

输出：

希望我有清楚的答案