JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 200px; width: 100%;"></div>

<div id="LegendContainer" style="height: 200px; width: 300px;overflow:hidden;"></div>

<p class="description">Built using <a href="http://canvasjs.com/" title="CanvasJS HTML5 Charts" target="_blank">CanvasJS</a>

</p>

CSS

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active {
    color: #4F81BC;
}

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer", {
    data: [{
        type: "pie",
        dataPoints: [
            {y: 71, color:"#369EAD"}, 
            {y: 55, color:"#C24642"},
            {y: 50, color:"#7F6084"},
            {y: 65, color:"#86B402"}
        ]
    }]
});
chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2", {
    data: [{
        type: "pie",
        dataPoints: [
            {y: 50, color:"#A2D1CF"},
            {y: 65, color:"#C8B631"},
            {y: 95, color:"#6DBCEB"},
            {y: 68, color:"#52514E"},
            {y: 28, color:"#4F81BC"}
        ]
    }]
});
chart2.render();

//Pie chart is hidden by setting smaller width to the containing div
var chart3 = new CanvasJS.Chart("LegendContainer", {
    height: 200,
    width: 700,
    animationEnabled:false,
    data: [{        
        showInLegend: true,
        markerSize: 0,
        type: "pie",
        dataPoints: chart1.options.data[0].dataPoints.concat(chart2.options.data[0].dataPoints)
    }
    ],       
    legend:{
        horizontalAlign: "left",
        verticalAlign: "center",
        fontSize:14
    }
    
});
chart3.render();