JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.pie.min.js"></script>
<div id="placeholder"></div>

CSS

#placeholder {
    height: 500px;
}

JavaScript

$(function () {
    var data = [{
        label: "data1",
        data: '10:30'
    }, {
        label: "data2",
        data: '20:20'
    },

    ];

    for (var i = 0; i < data.length; i++) {
        var hours = parseInt(data[i].data.split(':')[0]);
        var minutes = parseInt(data[i].data.split(':')[1]);
        data[i].data = hours * 60 + minutes;
    }

    var plot = $.plot("#placeholder", data, {
        series: {
            pie: {
                show: true,
                label: {
                    radius: 0.5,
                    formatter: labelFormatter
                }
            }
        },
        grid: {
            hoverable: true,
            autoHighlight: true
        },
        legend: {
            show: false
        }
    });

    function labelFormatter(label, series) {
        var value = Math.floor(series.data[0][1] / 60) + ':' + (series.data[0][1] % 60);
        return "<div style='font-size:10pt; text-align:center; padding:2px; color:black;'>" + label + "<br/>" + Math.round(series.percent) + "%<br />" + value + "</div>";

    }

});