JSFiddle - React, Tailwind, and code Playground

by RichardAD

HTML

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/pie-charts/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>Kendo UI donut chart</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
    

</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <div class="demo-section k-content wide">
        <div id="donutchart"></div>
    </div>
    
</div>


</body>
</html>

JavaScript

var data = [
            {
                "year": "2018-2019",
                "PresentDays": 90,
                "AbsentDays": 3,
                "NA": 7
            },         
            {
                "year": "2019-2020",
                "PresentDays": 85,
                "AbsentDays": 10,
                "NA": 5
            }
        ];
        
        function createDonutChart() {
            // reshape data
            
            donutdata = [];
            data.forEach(function(item) {
              donutdata.push (
              	{ name: item.year,
                  data: [
                	{ category: 'PresentDays', value: item.PresentDays },
                  { category: 'AbsentDays', value: item.AbsentDays},
                	{ category: 'NA', value: item.NA }
                  ]
                }
              );
            });
            
            console.log(donutdata);
            
            $("#donutchart").kendoChart({
                title: {
                    text: "Attendance By Year"
                },
                legend: {
                    position: "bottom",
                    group: "name",
                    
                },
                dataSource: {
                    data: donutdata
                },
								seriesDefaults: {
                    type: "donut",
                    startAngle: 150
                },
                seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"],
                tooltip: {
                    visible: true,
                    template: "${ category } - ${ value }%"
                }
            });
        }

        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Attendance"
                },
                legend: {
                    position: "bottom"
                },
                dataSource: {
                    data: data
                },
                series: [{
            ...