donut chart with plus minus buttons typescript

Question

I've searched a lot but couldn't find code example for react typescript component : I am looking for donut chart with two colours and two buttons where I can increase percent of donut filling of certain colour and responsively number of % in the middle. I have found one with range bar but need with buttons + and - and two other buttons where I can toggle colours.

this is html in return of typescript:

-

        <button className="btnPlus">+</button>

        <div className="percent">80%</div>

      </div>

      <h2>Assets</h2>

      <button className="btnBTC">

        <img className="assetLogo" src={btcLogo} />

        BTC
      </button>

      <button className="btnSolana">

        <img className="assetLogo" src={solanaLogo} />

        Solana
      </button>

this is css:

.assetContainer .assetWrapper .assetList .circle {

background: #202024;

border-radius: 50%;

margin: -6em auto 0 auto;

width: 12em;

height: 12em;

border: 12px solid transparent;

background-size: 100% 100%;

background-repeat: no-repeat;

background-image: linear-gradient(#202024, #202024),

linear-gradient(1200deg,   gray  80%, green 20%);

background-position: center center;

background-origin: content-box, border-box, border-box, border-box, border-box;

background-clip: content-box, border-box, border-box, border-box, border-box;

transform: rotate(0deg);

}

.assetContainer .assetWrapper .assetList .circle .percent {

text-align: center;

height: 5.5em;

line-height: 5.5em;

color: white;

font-size: 2em;

margin: 0;

}

.assetContainer .assetWrapper .assetList .circle .btnMinus {

border-radius: 50%;

height: 1.8em;

width: 1.8em;

border: 1px solid #ffffff;

color: white;

background: #202024;

text-align: center;

margin: 0;

margin-top: 45%;

margin-left: 10%;

position: absolute;

display: flex;

justify-content: center;

align-items: center;

}

.assetContainer .assetWrapper .assetList .circle .btnPlus {

border-radius: 50%;

height: 1.8em;

width: 1.8em;

border: 1px solid #ffffff;

color: white;

background: #202024;

text-align: center;

margin: 0;

margin-top: 45%;

margin-left: 70%;

position: absolute;

display: flex;

justify-content: center;

align-items: center;

}

.assetContainer .assetWrapper .assetList h2 {

margin-top: 20px;

text-align: center;

}

.assetContainer .assetWrapper .assetList .btnBTC {

border: 1px solid #ffffff;

box-sizing: border-box;

border-radius: 5px;

padding: 7px 25px;

color: white;

background: gray;

font-size: 16px;

height: 2em;

width: 16em;

position: absolute;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

margin-left: 40px;

margin-top: 50px;

}

.assetContainer .assetWrapper .assetList .btnBTC img {

margin-left: 0;

margin-right: 5px;

}

.assetContainer .assetWrapper .assetList .btnSolana {

border: 1px solid #ffffff;

box-sizing: border-box;

border-radius: 5px;

padding: 7px 25px;

color: black;

background: green;

font-size: 16px;

height: 2em;

width: 16em;

position: absolute;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

margin-left: 40px;

margin-top: 100px;

}

.assetContainer .assetWrapper .assetList .btnSolana img {

margin-left: 5px;

margin-right: 10px;

}