JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yourjavascript.com/41704451561/chart-min.js"></script>
<div  style="width: 300px;">
    <canvas id="pie-chart-area" width="300" height="300"/>
</div>

<div id="legend"></div>

CSS

.pie-legend li span {
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 5px;
}
.pie-legend {
    list-style: none;    
}

JavaScript

var pieData = [
{
    value: 300,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
},
{
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
},
{
    value: 40,
    color: "#949FB1",
    highlight: "#A8B3C5",
    label: "Grey"
},
{
    value: 120,
    color: "#4D5360",
    highlight: "#616774",
    label: "Dark Grey"
}
];


var pie_ctx = document.getElementById("pie-chart-area").getContext("2d");
    window.myPie = new Chart(pie_ctx).Pie(pieData, {
        legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
    });

var legend = myPie.generateLegend();
$("#legend").html(legend);