JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="container">
  <div id="legends" class="col col-2">
    <ul id="legendList">      
    </ul>
  </div>
  <div id="chartContainer" class="col col-10" style="height: 360px;"></div>
</div>

CSS

.col {
  float: left;
}

.col-10 {
  width: 80%;
}

.col-2 {
  width: 10%;
}

#legendList li{
  padding-bottom: 10px;
  list-style-type: square;
  font-size: 15px;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
                               {
  title:{
    text: "Understanding Legend"
  },
	data: [
    {
      type: "doughnut",
      dataPoints: [
        {name: "Jon", y: 230 },
        {name: "Jose", y: 245},
        {name: "Joey", y: 345},
        {name: "Trin", y: 367 }
      ]
    }
  ]
});


chart.render();

//Add custom-legends as list and attach click event to that
var legendListId = document.getElementById("legendList");
customLegends(chart,legendListId);

function customLegends(chart, legendListId) {
  var colorSetArray = chart.get("selectedColorSet");
  for(var i=0; i < chart.options.data[0].dataPoints.length; i++) {	
    var dp = chart.options.data[0].dataPoints[i];
    var li = document.createElement("li");
    li.style.color = colorSetArray[i%(colorSetArray.length)];
    li.appendChild(document.createTextNode(dp.name));
    legendListId.appendChild(li); 
    jQuery('li').each(function(index) {
      jQuery(this).attr('id', (index));
    });
  }
};