JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="place-for-chart">
  <canvas id="myChart"></canvas>
</div>

<div class="description">
  <p class="first hidden" id="hide1">I'm description to no. 1 and I was hide</p>
  <p class="first hidden" id="hide2">I'm description to no. 2 and I was hide</p>
  <p class="first hidden" id="hide3">I'm description to no. 3 and I was hide</p>
  
</div>

CSS

.place-for-chart {
  width: 300px; 
  height: 300pX;
}

.hidden {
  visibility: hidden;
}

JavaScript

var data = {
	  	datasets: [{
				data: [20, 20, 20],
				backgroundColor: ["#27ae60", "#95a5a6", "#488a99"]
				}],
			labels: ["first", "second", "third"],
};


$(document).ready(
	function() {
		var canvas = document.getElementById("myChart");
    	var ctx = canvas.getContext("2d");
    	var myNewChart = new Chart(ctx, {
      		type: 'doughnut',
      		data: data,
			options: {
				legend: {
					display: true,
					onClick: (e) => e.stopPropagation(),
					position: 'left',
					labels: {
						fontSize: 20
						}
					},
					
			    tooltips: {
						callbacks: {
							label: function(tooltipItem, data) {
								var label = data.labels[tooltipItem.index];
								return label;
									} 
								}
			  			},
			  	cutoutPercentage: 65
				}
			}
			);
      
    canvas.onclick = function(event) {
	    var activePoints = myNewChart.getElementsAtEvent(event);
  		var hiddenparagraph1 = document.getElementById("hide1");
      var hiddenparagraph2 = document.getElementById("hide2");
      var hiddenparagraph3 = document.getElementById("hide3");
      
  		if (activePoints.length > 0) {
    		var clickedSegmentIndex = activePoints[0]._index;
    		        
        if (clickedSegmentIndex==0) {
        	hiddenparagraph1.classList.remove("hidden");
        }
        else if(clickedSegmentIndex==1) {
	        hiddenparagraph2.classList.remove("hidden");
        }
        else {
        hiddenparagraph3.classList.remove("hidden");
        }
        }
			      
     
    	};
		}
	);