JSFiddle - React, Tailwind, and code Playground
HTML
<div style="width:400px;height:400px" id="gauge">
</div>
JavaScript
require(["dojo/ready", "dijit", "dojox/dgauges/components/grey/SemiCircularLinearGauge", "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,...