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="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  theme: "light2",
  toolTip: {
  	shared: true
  },
  title: {
  	text: "Chart with Data from JSON"
  },
  data: []
});

function addData(data) {
  var dataPoints = [], j = 0;
  for (var device in data) {
    for(var i = 0; i < data[device].length; i++) {    
      for(var deviceData in data[device][i]) {
      	dataPoints = [];        
        dataPoints.push({ label: device, x: j, 
        y: Number(data[device][i][deviceData]) });
        chart.options.data.push({ name: deviceData, type: "stackedColumn", dataPoints: dataPoints})
      }      
    }
    j++;
  }
  chart.render();
}

$.getJSON("https://api.npoint.io/e7b6dd2fd0a969f8e4ef", addData);