JSFiddle - React, Tailwind, and code Playground

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.metro.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="gauge"></div>

JavaScript

$("#gauge").kendoRadialGauge({
    pointer: {
        // Current value
        value: 0.72
    },
    scale: {
        // Start and End angle of the Gauge
        startAngle: 0,
        endAngle: 180,
        
        // Make range wider and with units inside
        rangeSize: 40,
        rangeDistance: -10,
        
        // Configure major and minor unit
        minorUnit: 0.05,
        majorUnit: 0.25,
        // Make major ticks same size than minor ticks
        majorTicks: {
            size: 10
        },
        
        // Define min and max (0% - 100%)
        min: 0,
        max: 1,
        
        // Labels outside the range and number as percentage with no decimals
        labels: {
            position: "outside",
            format: "p0"
        },
        
        // Color ranges
        ranges: [
            {
                from: 0,
                to: 0.45,
                color: "red"
            }, 
            {
                from: 0.45,
                to: 0.80,
                color: "yellow"
            },
            {
                from: 0.80,
                to: 1.00,
                color: "green"
            }
        ]
    }
});