JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="container">
  <div class="chart" id="chartContainer1" style="height: 300px;"></div>
  <div class="chart" id="chartContainer" style="height: 300px;"></div>
</div>

CSS

.chart {
  float: left;
  width: 50%;
  margin: 0px;
  padding: 0px;

}
body {
  background-color: #01486c;
}

JavaScript

window.onload = function () {

  CanvasJS.addColorSet("customColorSet1",[//colorSet Array
    '#39cad4', '#51ebb3', '#f9f48e', '#fba790', '#21b4f6', '#F136AF', '#FF875C'
  ]);

  var jsonData = [{
    "doughnut": [
      { label: "域名", y: 13 },
      { label: "主机", y: 13 },
      { label: "网站", y: 10 },
      { label: "安全设备", y: 6 },
      { label: "网络设备", y: 60 },
    ],
    "splineArea": [
      [
        { label: "00:00", y: 2000},
        { label: "03:00", y: 122},
        { label: "06:00", y: 3121},
        { label: "09:00", y: 54},
        { label: "12:00", y: 60},
        { label: "15:00", y: 2630},
        { label: "18:00", y: 1150},
        { label: "21:00", y: 2442},
        { label: "00:00", y: 1292}
      ],
      [
        { label: "00:00", y: 1130},
        { label: "03:00", y: 812},
        { label: "06:00", y: 1134},
        { label: "09:00", y: 2361},
        { label: "12:00", y: 413},
        { label: "15:00", y: 1330},
        { label: "18:00", y: 1301},
        { label: "21:00", y: 594},
        { label: "00:00", y: 1230}
      ],
      [
        { label: "00:00", y: 1220},
        { label: "03:00", y: 1132},
        { label: "06:00", y: 1421},
        { label: "09:00", y: 2114},
        { label: "12:00", y: 954},
        { label: "15:00", y: 620},
        { label: "18:00", y: 132},
        { label: "21:00", y: 190},
        { label: "00:00", y: 540}
      ]
    ]
  },
	{
    "doughnut": [
      { label: "域名", y: 11 },
      { label: "主机", y: 10 },
      { label: "网站", y: 12 },
      { label: "安全设备", y: 3 },
      { label: "网络设备", y: 60 },
    ],
    "splineArea": [
      [
        { label: "00:00", y: 1130},
        { label: "03:00", y: 812},
        { label: "06:00", y: 1134},
        { label: "09:00", y: 2361},
        { label: "12:00", y: 413},
        { label: "15:00", y: 1330},
        { label: "18:00", y: 1301},
        { label: "21:00", y: 594},
        { label: "00:00", y: 1230}
      ],
      [
        { label: "00:00", y: 2000},
   ...