JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="parent">
    <div id="doughnutContainer"></div>
    <div id="pieContainer"></div>
</div>

CSS

#parent {
  position: relative;
}

#doughnutContainer, #pieContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
#doughnutContainer {
  width:100%;
  height:550px;
}
#pieContainer {
  transform: translate(-50%, 22%);
  width:100%; 
  height:382px;
}

JavaScript

CanvasJS.addColorSet("newColorSet",
                [//colorSet Array

                "#2F4F4F",
                "#008080",
                "#2E8B57",
                "#3CB371",
                "#90EE90"                
                ]);

        var chart1 = new CanvasJS.Chart("doughnutContainer",
        {
            interactivityEnabled: false,
            data: [
            {
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                type: "doughnut",
                dataPoints: [
                    { y: 10, color: "#2F4F4F" },
                    { y: 10, color: "#008080", indexLabel: "\u2800\u2800test"},
                    { y: 10, color: "#008080", indexLabel: "test"},
                    { y: 10, color: "#2E8B57" },
                    { y: 10, color: "#3CB371" },
                    { y: 10, color: "#90EE90" },
                    { y: 10, color: "#2F4F4F" },
                    { y: 10, color: "#008080" },
                    { y: 10, color: "#2E8B57" },
                    { y: 10, color: "#3CB371" },
                    { y: 10, color: "#90EE90" },
                    { y: 10, color: "#008080" },
                    { y: 10, color: "#2E8B57" },
                ]
            },
        
            ]
        });
        
        var chart2 = new CanvasJS.Chart("pieContainer",
        {        
            colorSet: "newColorSet",
            backgroundColor: "transparent",
            interactivityEnabled: false,
            title:{
                text: "2040",
                verticalAlign: "center",
                fontSize: 35,
              },
            data: [
            {
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                indexLabelFontSize: 24,
                type: "doughnut",
                dataPoints: [
                    { y: 10, indexLabel: "\u2800Jan." },
                    { y: 20, indexLabel: "\u2800\u2800Feb." },
   ...