JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

	<div id="chartContainer" style="width:100%; height:300px;"></div>

JavaScript

window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
  theme: "light2",
  title: {
    text: "Pie Chart"
  },
  subtitles: [{
  	text: "No of Occurences of colors from CSV"
  }],
  data: [{
    type: "pie",
    indexLabel: "{label}: {y}",
    dataPoints: []
  }]
});
    
$.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vSmVUvfIaplP9c47v2i5kqmpfLKLTM8Wr8m_cBtVLL9Gb3xqxtUVYdWKPN7R7-zlc8GrYxpe8Agu1EF/pub?gid=848385764&single=true&output=csv", function(csvData) {
  var csvLines = [];
  chart.options.data[0].dataPoints = [];
  var obj = {};
  csvLines = csvData.split(/[\r?\n|\r|\n]+/);         
  csvLines.forEach(function(el, i, arr) {
    obj[el] = obj[el] ? ++obj[el] : 1;
  });

  Object.keys(obj).forEach(function(key) {
    chart.options.data[0].dataPoints.push({label: key, y: obj[key]});
  });
  chart.render();
});
}