JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<br/>
<div id="DevJan" style="height: 17px; width: 100%;"> Delivered </div>
<div id="NotDevJan" style="height: 17px; width: 100%;"> Not Delivered</div>

CSS

#DevJan {
  background-color: #ec4646;
  text-Align: center;
}

#NotDevJan {
  background-color: #93b5e1;
  text-Align: center;
}

JavaScript

$("#NotDevJan").hide();
var chart1 = new CanvasJS.Chart("chartContainer",{
  animationEnabled: true,
  legend:{
    verticalAlign: "bottom",
    horizontalAlign: "center"
  },
  data: [{
    click: function (e){
      if( e.dataPoint.dataPoints === "Delivered"){
        $("#DevJan").show();
        $("#NotDevJan").hide();
      }else{
        $("#DevJan").hide();
        $("#NotDevJan").show();
      }
    },
    indexLabel: "{label} ({y} people)",
    yValueFormatString: "#,##0.\"\"",
    indexLabelFontSize: 17,
    indexLabelFontFamily: "Garamond",
    indexLabelFontColor: "black",
    indexLabelLineColor: "black",
    indexLabelPlacement: "outside",
    type: "pie",
    showInLegend: true,
    legendText: "{label}",
    dataPoints:[
      {  y: 4181563, label: "Not Delivered", dataPoints: "Not Delivered" },
      {  y: 2175498, label: "Delivered", dataPoints: "Delivered" },
    ]
  }]
});

chart1.render();