JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var jsonData = [
  {
    "SensorApp": "GPU-Z",
    "SensorClass": "GPU",
    "SensorName": "GPU Clock",
    "SensorValue": "135",
    "SensorUnit": "MHz",
    "SensorUpdateTime": 71916
  },
  {
    "SensorApp": "GPU-Z",
    "SensorClass": "GPU",
    "SensorName": "Memory Clock",
    "SensorValue": "162",
    "SensorUnit": "MHz",
    "SensorUpdateTime": 71916
  },
  {
    "SensorApp": "GPU-Z",
    "SensorClass": "GPU",
    "SensorName": "GPU Temperature",
    "SensorValue": "48.84375",
    "SensorUnit": "°C",
    "SensorUpdateTime": 71916
  },
  {
    "SensorApp": "GPU-Z",
    "SensorClass": "GPU",
    "SensorName": "Hot Spot",
    "SensorValue": "62.84375",
    "SensorUnit": "°C",
    "SensorUpdateTime": 71916
  }
];

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
      text: "Chart from JSON Data"              
    },
    data: [{
      type: "column",
      dataPoints: []
    }]
  });


  function parseJSON(jsonData) {
    var dataPoints = [];
    for(var i=0; i<jsonData.length; i++){
      var label = jsonData[i].SensorName;
      var yValue = parseFloat(jsonData[i].SensorValue);
      dataPoints.push({label: label, y: yValue})
    }
    chart.options.data[0].dataPoints = dataPoints;
    chart.render();
  }

  parseJSON(jsonData);

  function updateJSON() {
    for(var i=0; i<jsonData.length; i++) {
      jsonData[i].SensorValue = parseFloat(jsonData[i].SensorValue) + Math.round(5 + Math.random() *(-5-5));
    }
    parseJSON(jsonData);
    setTimeout(updateJSON, 1000);
  }

  setTimeout(updateJSON, 2000);

}