Reactjs half circle with arrow like barometer

Question

I want to ask you guys about chartjs.

I have work to do in order to create a functionality like this.

I tried it on stackblitz, and the result is as follows.

My expectation is:

When the idealValue is less than 30, the arrow (which is red) points to the left.

When the idealValue is less than 50, the arrow (which is orange) points to the upper left.

When the idealValue is less than 75, the arrow points to the top right (green).

When the idealValue is greater than 75, the arrow (dark green) points to the right.

My Code :

import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import { Chart, ArcElement } from 'chart.js';

Chart.register(ArcElement);

export default function App() {
  const idealValue = 25;

  let transformValue = 'translate(-50%, -50%)';

  if (idealValue < 30) {
    transformValue = 'translate(-100%, -50%)';
  } else if (idealValue > 50) {
    transformValue = 'translate(-50%, -100%)';
  } else if (idealValue > 70) {
    transformValue = 'translate(0%, -50%)';
  }

  const data = {
    datasets: [
      {
        data: [25, 25, 25, 25],
        backgroundColor: ['#F26476', '#FDB022', '#32D583', '#12B76A'],
        display: true,
        borderColor: '#fff',
      },
    ],
  };

  return (
    <div>
      <Doughnut
        data={data}
        options={{
          plugins: {
            legend: {
              display: false,
            },
            tooltip: {
              enabled: false,
            },
          },
          rotation: -90,
          circumference: 180,
          cutout: '0%',
          maintainAspectRatio: true,
          responsive: true,
        }}
      />
      <div
        style={{
          position: 'absolute',
          top: '60%',
          left: '42.5%',
          transform: 'translate(-50%, -50%)',
          textAlign: 'center',
        }}
      >
        <div
          style={{
            width: 11.6,
            height: 100.42,
            left: 45,
            top: 10,
            position: 'absolute',
            transform: transformValue,
            transformOrigin: '0 0',
            background: '#505050',
          }}
        ></div>
      </div>
    </div>
  );
}

Thank You.