JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

JavaScript

window.onload = function() {

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title: {
      text: "Desktop Search Engine Market Share - 2016"
    },
    data: [{
      type: "pie",
      startAngle: 270,
      yValueFormatString: "##0.00\"%\"",
      indexLabel: "{label} {y}",
      dataPoints: [
        {y: 0, label: "Google"},
        {y: 0, label: "Bing"},
        {y: 0, label: "Baidu"},
        {y: 0, label: "Yahoo"},
        {y: 0, label: "Others"}
      ]
    }]
  });

  checkForZeroDps(chart);
  chart.render();

  function checkForZeroDps(chart) {
    var isDpsZero = false;
    for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
      if(chart.options.data[0].dataPoints[i].y === 0) {
        isDpsZero = true;
      }
    }
    if(isDpsZero) {
      chart.options.data[0].type = "doughnut";
      chart.options.data[0].innerRadius = "99%";
      chart.options.data[0].dataPoints.push({
        y: 0.000001,
        indexLabel: " ",
        indexLabelLineThickness: 0,
        toolTipContent: null
      });
    }
  }

}