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",
  title: {
  	text: "Chart with Data from JSON"
  },
  toolTip: {
    shared: true
  },
  data: []
});

function addData(data) {
  var dataPoints = [];
  for (var device in data) {
    for(var i = 0; i < data[device].length; i++) {
      dataPoints = [];
      for(var deviceData in data[device][i]) {
        dataPoints.push({ label: deviceData, y: Number(data[device][i][deviceData]) });
      }

      chart.options.data.push({ name: device, showInLegend: true, type: "stackedColumn", dataPoints: dataPoints})
    }
  }
  chart.render();
}

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