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 hide">I'm description to no. 1 and I was hide</p>
  <p class="second hide">I'm description to no. 2 and I was hide</p>
  <p class="third hide">I'm description to no. 3 and I was hide</p>
</div>

CSS

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

.hide {
  visibility: hidden;
}

.clicked {
  visibility: visible;
}

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 CompetenceChart = new Chart(ctx, {
      type: 'doughnut',
      data: data
    });
}
)