JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<div style="width:400px;height:400px" id="gauge">
</div>

JavaScript

require(["dojo/ready", "dijit", "dojox/dgauges/components/grey/CircularLinearGauge", "dojox/dgauges/TextIndicator", "dojox/dgauges/LinearScaler", "dojox/dgauges/CircularScale", "dojox/dgauges/CircularRangeIndicator", "dojox/dgauges/CircularValueIndicator", "dojo/domReady!"], function (
    ready, dijit, CircularLinearGauge, TextIndicator, LinearScaler, CircularScale, CircularRangeIndicator, CircularValueIndicator) {
        ready(function () {
            var gauge = new CircularLinearGauge({
                label: 'Test Report'
            }, dojo.byId("gauge"));

            //gauge.title = 'Test Report' //doesnt work :(

            // The scaler
            var scaler = new LinearScaler({
                minimum: 0,
                maximum: 100,
                majorTickInterval: 10,
                minorTickInterval: 5
            });

            var scale = new CircularScale({
                scaler: scaler,
                originX: 73.3,
                originY: 73.3,
                startAngle: 110,
                font: { size: "6pt", weight: "bold", family : "Helvetica", color: "#555"},
                endAngle: 70,
                radius: 58,
                labelPosition: "outside",
                tickShapeFunc: function (group, scale, tick) {
                    return group.createLine({
                        x1: tick.isMinor ? 0 : 0,
                        y1: 0,
                        x2: tick.isMinor ? 3 : 8,
                        y2: 0
                    }).setStroke({
                        color: tick.isMinor ? "black" : "white",
                        width: tick.isMinor ? 0.5 : 1
                    });
                }
            });
            gauge.addElement("scale", scale);

            // A value indicator
            var indicator = new CircularValueIndicator({
                interactionArea: "indicator",
                indicatorShapeFunc: function (group) {
                    return group.createPolyline([10, -3, 51,...