JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartsContainer"></div>
JavaScript
var dps = [];
var dataSeries = [];
var charts = [];
$.when( $.getJSON("https://api.myjson.com/bins/us9mk", function(result) {
for(var i = 0; i < result.length; i++) {
dps = [];
for(var j = 0; j < result[i].data.length; j++) {
dps.push({y: result[i].data[j]});
}
dataSeries.push({id: result[i].id, type: "pie", dataPoints: dps})
}
})).then(function( data, textStatus, jqXHR ) {
for(var i = 0; i < dataSeries.length; i++) {
$("#chartsContainer").append("<div id='" + dataSeries[i].id + "' style='width: 100%; height: 200px;'></div>");
charts[i] = new CanvasJS.Chart(dataSeries[i].id, {
title: {
text: dataSeries[i].id
},
data: [dataSeries[i]]
});
charts[i].render();
}
});