JSFiddle - React, Tailwind, and code Playground

by Abhay Singh

HTML

<select id="selecttype">
  <option value="Enterprise" data-total="38626" data-engaged="14642">Enterprise</option>
  <option value="Others" data-total="48626" data-engaged="22642">Others</option>
</select>


  <div id="chartval"
  class='pie-chart'
  data-percentage='38'
></div>

CSS

.pie-chart {
  position: relative;
}

.pie-chart__canvas {
  height: 100%;
  left: 0;
  position: absolute;
  transform: rotateY(180deg);
  top: 0;
  width: 100%;
}

.pie-chart__percentage {
  font-family: 'Playfair Display';
  font-size: 30px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

JavaScript

function createchart() {
  var pieCharts = document.querySelectorAll('.pie-chart');
  
  Array.prototype.forEach.call(pieCharts, function(wrapperEl) {
    // Pull our variables out of our helper div
    var dataset = wrapperEl.dataset;
    var percentage = dataset.percentage ? parseInt(dataset.percentage, 10) : 0;
    var diameter = dataset.diameter ? parseInt(dataset.diameter, 10) : 150;
    var strokeWidth = dataset.strokeWidth ? parseInt(dataset.strokeWidth, 10) : 15;
    var fillColor = dataset.fillColor || '#f47b28'; // orange
    var bgColor = dataset.bgColor || '#fac5a1'; // light orange
    
    // Size our wrapper element and add our percentage
    wrapperEl.style.height = diameter + 'px';
    wrapperEl.style.width = diameter + 'px';
    var percentageEl = document.createElement('span');
    percentageEl.classList.add('pie-chart__percentage');
    percentageEl.style.color = fillColor;
    percentageEl.innerText = percentage + '%';
    wrapperEl.appendChild(percentageEl);
    
    // Setting up the values we're gonna use to draw our circles
    var center = diameter;
    var radius = center - (strokeWidth);
    var startAngle = degreesToRadians(-90);
    var fullCircle = degreesToRadians(365);
    var endAngle = startAngle + degreesToRadians(percentage / 100 * 365);
    
    // Draw our canvas! Note we're doubling our sizes so we look good on high res displays
    var canvas = document.createElement('canvas');
    canvas.classList.add('pie-chart__canvas');
    canvas.height = diameter * 2;
    canvas.width = diameter * 2;
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = strokeWidth * 2;
    ctx.strokeStyle = bgColor;
    ctx.beginPath();
    ctx.arc(center, center, radius, startAngle, fullCircle);
    ctx.stroke();
    ctx.strokeStyle = fillColor;
    ctx.beginPath();
    ctx.arc(center, center, radius, startAngle, endAngle);
    ctx.stroke();

    wrapperEl.appendChild(canvas);
  });
  
  function degreesToRadians(degrees) {
    return (degrees...