JSFiddle - React, Tailwind, and code Playground

HTML

<div id="paper1"></div>

JavaScript

var paper = Raphael("paper1", 250, 250);
            var dialCenter = 125;
            var dialRadius = 125;
            var dialCircum = 2 * Math.PI * dialRadius;
            var circle = paper.circle(dialCenter, dialCenter, dialRadius).attr({fill: "orange"});
            paper.circle(125, 125, 10).attr({fill: "black", "stroke-width": 5, stroke: "purple"});
            var needle = paper.path("M" + dialCenter.toString() + ' ' + dialCenter.toString() + ", L0,125").attr({stroke: '#ffff00', 'stroke-width': 6});
            var centerCircle = paper.circle(125, 125, 10).attr({fill: "black", "stroke-width": 5, stroke: "purple"});
            needle.data("id", 'needle1');
            var degStep = 1;
            var currentDeg = 1;
            var mouseXPos, mouseYPos, mouseDir, mouseEv;

            var needleSet = paper.set();
            needleSet.push(needle);

            var circSectorA = 360 / dialCircum;
            var currSectorX = 0;
            var currSectorY = 0;

            moveNeedle = function (dx,dy,x,y,e) {
                var mouseX = (e.offsetX == undefined) ? e.layerX : e.offsetX;
                var mouseY = (e.offsetY == undefined) ? e.layerY : e.offsetY;
                var needleA = Raphael.angle(dialCenter, dialCenter, needle.getPointAtLength(needle.getTotalLength())['x'], needle.getPointAtLength(needle.getTotalLength())['y']);
                var newA = Raphael.angle(dialCenter, dialCenter, mouseX, mouseY);
                var rotateAngle = (360 - needleA) + newA;
                needle.transform('r' + rotateAngle + ",125,125");
            }
            var startDrag = function () {
                // console.log(this);
            }, dragger = moveNeedle
            , endDrag = function () {

            };

            needleSet.drag(dragger, startDrag, endDrag);