JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<body class="claro">
    <div data-dojo-type="dojox/dgauges/components/default/VerticalLinearGauge" data-dojo-id="gauge" value="10" minimum="-50" maximum="50" animationDuration="100" style="width:300px; height:300px"></div>
</body>

JavaScript

require(['dojo/parser', 'dojox/dgauges/components/default/VerticalLinearGauge','dojox/dgauges/RectangularRangeIndicator', 'dojo/domReady!'], function (parser, VerticalLinearGauge) {
    parser.parse();
    var ri = new dojox.dgauges.RectangularRangeIndicator();
	ri.set("start",0 );
    ri.set("value", 30);
    ri.set("startThickness", 10);
    ri.set("endThickness", 10);
    gauge.getElement("scale").addIndicator("ri", ri, false);
    
    ri._defaultVerticalShapeFunc = 
        function(indicator, group, 
                 scale, startX, 
                 startY, endPosition, 
                 startThickness, endThickness, 
                 fill, stroke){
			var gp = [startX, startY, startX, endPosition, startX + endThickness, endPosition, startX + startThickness, startY, startX, startY]
			if(fill && fill.colors){
				// Configure gradient
				fill.x1 = startX;
				fill.y1 = startY;
				fill.x2 = startX;
				fill.y2 = endPosition;
			}
			return group.createPolyline(gp).setFill(fill).setStroke(stroke);
        };
    
});