JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="ParamGraphContainer" style="height: 150px;width:25% ; display: block;float:right;padding-left:0;margin-top:0px;margin-right:1px;position:static;margin-left:1px, margin-top:1px;margin-bottom:1px;"></div>
<div id="chartContainer" style="height: 150px;width:25% ; display: block;float: center;margin-left:1px;margin-right:1px;,margin-bottom:1px;margin-top:1px;"></div>

CSS

#ParamGraphContainer,  #chartContainer{
  border: 1px solid magenta;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Total Pass Precentage",
    fontFamily: "Verdana",
    fontSize: 18,
    fontWeight: "normal",
  },
  animationEnabled: true,
  animationDuration: 500,
  data: [{
    type: "pie",
    startAngle: 25,
    yValueFormatString: "##0.0\"%\"",
    indexLabel: "{label} {y}",
    indexLabelFontSize: 20,
    dataPoints: [
      {y: 31.400000, label: "Pass",color: "green"},
      {y: 68.600000, label: "Fail",color: "red"},
    ]
  }]
});
chart.render();
var chart2 = new CanvasJS.Chart("ParamGraphContainer", {
  title: {
    text: "RND Pass Precentage",
    fontFamily: "Verdana",
    fontSize: 18,
    fontWeight: "normal",
  },
  animationEnabled: true,
  animationDuration: 500,
  data: [{
    type: "pie",
    startAngle: 25,
    yValueFormatString: "##0.0\"%\"",
    indexLabel: "{label} {y}",
    indexLabelFontSize: 20,
    dataPoints: [
      {y: 64.646465, label: "Pass",color: "green"},
      {y: 35.353535, label: "Fail",color: "red"},
    ]
  }]
});
chart2.render();