i want to implement gauge chart usi apexcharts where i set 3 different color according to range

Question

like this image it is possible in apexchart?

i try this but i want <50% show only red color and between 50 to 80% show red and yellow both the colors and above 80 % show 3 colors red, yellow and green.

I want to change the color depending on a range the percentage falls into. I would also like to change the text according to the same range.

Here is my chart options. I am using a Radial Bar chart from Apex Charts.

const ApexChart = () => {
  
  const options = {
    chart: {
      height: 350,
      type: "radialBar",
      offsetY: -10
    },
    plotOptions: {
      radialBar: {
        startAngle: -90,
        endAngle: 90,

        dataLabels: {
          name: {
            fontSize: "25px",
            fontWeight: "bold",
            color: "black",
            offsetY: -200
          },
          value: {
            offsetY: -30,
            fontWeight: "bold",
            fontSize: "40px",
            color: "blue",
            formatter: function (val) {
              return val + "%";
            }
          }
        }
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.7,
        opacityTo: 0.9,
        type: 'horizontal',
        inverseColors: false,
        stops: [0, 50, 100],
        colorStops: [
          {
            offset: 50,
            color: "red",
            opacity: 1
          },
          {
            offset: 80,
            color: "yellow",
            opacity: 1
          },
          {
            offset: 100,
            color: "green",
            opacity: 1
          }
        ]
      }
    },

    stroke: {
      dashArray: 6`your text`
    },
    labels: ["OEE"]
  };
  const series = [25];

this is the code please give me solution if possible