angular - Clockwise and Anti Clockwise Apex Charts Radial Bar Chart issue

Question

I want to use the below graph and trying to show clockwise for positive and anti-clockwise for negative. When i use the below link code, it works fine for positive values but it isn't working for negative values. Is it possible to use it for anticlockwise values too. https://apexcharts.com/javascript-chart-demos/radialbar-charts/gradient/

import { Component, ViewChild } from "@angular/core";

import {
  ApexNonAxisChartSeries,
  ApexPlotOptions,
  ApexChart,
  ApexFill,
  ChartComponent,
  ApexStroke
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  labels: string[];
  plotOptions: ApexPlotOptions;
  fill: ApexFill;
  stroke: ApexStroke;
};

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  //@ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() { this.test(); }
  public test() {
    this.chartOptions = {
      series: [25],
      chart: {
        height: 350, //ArcRadius
        type: "radialBar",
        toolbar: {
          show: true
        }
      },
      plotOptions: {
        radialBar: {
          startAngle: 0,
          endAngle: 360,
          hollow: {
            margin: 0,
            size: "70%",
            background: "#fff", //Inner Color
            image: undefined,
            position: "front",
            dropShadow: {
              enabled:true,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            }
          },
          track: {
            background: "#fff", // BackgroundRound Track Color
            strokeWidth: "67%",
            margin: 0, // margin is in pixels
            dropShadow: {
              enabled: true, //For Background white Track
              top: -3,
              left: 0,
              blur: 4,
              opacity: 0.35
            }
          },

          dataLabels: {
            show: true,
            name: {
              offsetY: -10,
              show: true,
              color: "#000", //#888
              fontSize: "17px"
            },
            value: {
              formatter: function (val) {
                return parseInt(val.toString(), 10).toString();
              },
              color: "#000", //#111
              fontSize: "36px",
              show: true
            }
          }
        }
      },
      fill: {
        type: "gradient",
        gradient: {
          shade: "dark",
          type: "horizontal",
          shadeIntensity: 0.5,
          gradientToColors: ["#000"], //GradientColor #ABE5A1
           inverseColors: true,
          opacityFrom: 0,
          opacityTo: 1,
          stops: [0, 0]
        }
      },
      stroke: {
        lineCap: "round"
      },
      labels: ["Percent"]
    };
  }
}

question from:https://stackoverflow.com/questions/65935865/clockwise-and-anti-clockwise-apex-charts-radial-bar-chart-issue

Answer 1

Waitting for answers