JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
 <div class="clearfix"> 
 <div style="width: 50%; float: left;">
   <table style="width: 100%;" class="summary" border="1">
     <tbody>
       <tr>
         <th>IP address</th>
         <td>192.168.1.148</td>
       </tr>
       <tr>
         <th>Interface</th>
         <td>Ethernet</td>
       </tr>
     </tbody>
   </table>
 </div>
 <div id="chartContainer" style="width: 50%; float: left; height:360px;"></div>
</div>

CSS

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

JavaScript

window.onload = function() {

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    animationDuration: 100,
    theme: "light2",
    label: 'I7-4790-WIN10-HOME.lan (Ethernet)',
    legendText: '',
    title: {
      text: "Megaytes"
    },
    axisX: {
      gridThickness: 1
    },
    axisY: {
      logarithmic: true,
      gridThickness: 1,
    },
    data: [{
      type: "line",
      lineThickness: 3,
      indexLabelFontSize: 16,
      color: "#23bfaa",
      dataPoints: [{
          x: new Date(2022, 6, 24, 15, 57, 6),
          y: 23210
        },
        {
          x: new Date(2022, 6, 24, 17, 1, 14),
          y: 24860
        },
        {
          x: new Date(2022, 6, 24, 17, 1, 30),
          y: 30564
        },
        {
          x: new Date(2022, 6, 24, 17, 24, 5),
          y: 40846
        },
        {
          x: new Date(2022, 6, 24, 19, 4, 3),
          y: 42056
        },
        {
          x: new Date(2022, 6, 24, 20, 4, 55),
          y: 45056
        }
      ]
    }]
  });
  chart.render();

}