JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Gaming Consoles Sold in 2012",
    },
    legend: {
      maxWidth: 350,
      itemWidth: 120,
    },
    data: [{
      type: "pie",
      showInLegend: true,
      legendText: "{indexLabel}",
      dataPoints: [
        {
          y: 4181563,
          indexLabel: "PlayStation 3",
          indexLabelFormatter: function (e) {
            var dpIndex = getDataPointIndex(e.dataSeries, e.dataPoint);
            var selectedColorSet = chart.get("selectedColorSet");
            var legendColor = e.dataPoint.legendMarkerColor ? e.dataPoint.legendMarkerColor : (e.dataPoint.color ? e.dataPoint.color : selectedColorSet[dpIndex % (selectedColorSet.length-1)]);
            console.log(legendColor);
          },          
        },
        { y: 2175498, indexLabel: "Wii" },
        { y: 3125844, indexLabel: "Xbox 360" },
        { y: 1176121, indexLabel: "Nintendo DS" },
        { y: 1727161, indexLabel: "PSP" },
        { y: 4303364, indexLabel: "Nintendo 3DS" },
        { y: 1717786, indexLabel: "PS Vita" },
      ],
    }]
  });
  chart.render();
};

function getDataPointIndex(dataSeries, dataPoint) {
  return dataSeries.dataPoints.findIndex(dp => dp === dataPoint);
}