JSFiddle - React, Tailwind, and code Playground

by sparksterz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.default.min.css">
<script id="NumberTruncateTemplate" type="text/x-kendo-template">
    # if(value >= 1000000) { #
        #= (value/1000000).toFixed(1) #M
    # } else if(value >= 1000) { #
        #= Math.round(value/1000) #k
    # } else { #
        #= Math.round(value) #
    # } #
</script>
<div id="gauge"></div>

JavaScript

var labelTemplate = kendo.template($("#NumberTruncateTemplate").html());
$("#gauge").kendoRadialGauge({
    pointer: {
        value: 360000
    },
    scale: {
        majorUnit: 360000,
        minorUnit: 90000,
        startAngle: -50,
        endAngle: 230,
        max: 3600000,
        reverse: false,
        labels: {
            position: "inside",
            template: labelTemplate,
            font: "10px Arial,Helvetica,sans-serif"
        },
        majorTicks: {
            size: undefined
        },
        minorTicks: {
            size: undefined
        },
        ranges: [{
            "from": 3000000,
                "to": 3600000,
                "color": "red"
        }, {
            "from": 2400000,
                "to": 3000000,
                "color": "orange"
        }, {
            "from": 1800000,
                "to": 2400000,
                "color": "green"
        }]
    }
});