JSFiddle - React, Tailwind, and code Playground

Base fiddle for chart.js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<table border="1">
  <tr>
    <td>
      First
    </td>
    <td>
      <canvas width="100%" height="100%" id="myChart"></canvas>
    </td>
    <td>
      Third
    </td>
  </tr>

</table>

JavaScript

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Female", "Male"],
    datasets: [{
      data: [10, 35],
      borderWidth:[0,0,0],
      backgroundColor: ["#0fa0e3", "#ff3549"]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false,
      position: "top",
      fontStyle: "bold",
      fontSize: 0,
      fullWidth: false,
      padding: 0
    },
    legend: {
      display: false,
      position: "top",
      fullWidth: false,
      labels: {
        display: false,
        usePointStyle: true,
        fontSize: 15,
        fontStyle: "bold"
      }

    },
    
  }
});