JSFiddle - React, Tailwind, and code Playground

by JSDavi

HTML

<body>
    <div id="chart"></div>
</body>

JavaScript

$("#chart").kendoChart({
                theme: "metro",
                title: {
                    text: data2[0].disks[disnum].diskID + " Information"
                },
                legend: {
                    position: "bottom"
                },

                series: [{
                    type: "donut",
                    field: "valueField",
                    categoryField: "cateField",
                    // explodeField: "explode",
                    labels: {
                        visible: true,
                        background: "transparent",
                        position: "outsideEnd",
                        distance: 10,
                        template: "#= category #:#= value# G"
                    }
                }],
                seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
                tooltip: {
                    visible: true,
                    template: "${ category } - ${ value }G"
                },

                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "donut",
                    startAngle: 90
                },
                dataSource: data2[0].disks[disnum].diskdata
            });