Charts.js Labels

I am using chart.js in my project and it is integrated successfully. Now what i want is that when hovering a particular data of graph, it should highlight its corresponding label on side of the graph as shown in the reference link.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="coin-token  nav-section">
  <div class="heta-container">
    <div class="row">          
      <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 d-flex justify-content-center align-items-center ">
        <div class="chart-container ">
          <canvas id="myChart " width="600 " class="chartjs-render-monitor " style="display: block; "></canvas>
        </div>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 d-flex justify-content-center flex-column ">
        <div>Heta Tokenization</div>
        <div class="chart-title-box ">
          <p class="chart-title "><span class="chart-title-perc ">15%</span> Teams</p>
        </div>
        <div class="chart-title-box ">
          <p class="chart-title "><span class="chart-title-perc ">03%</span> Advisor & Partners</p>
        </div>
        <div class="chart-title-box ">
          <p class="chart-title "><span class="chart-title-perc ">05%</span> Bounty & Airdrop</p>
        </div>
        <div class="chart-title-box ">
          <p class="chart-title "><span class="chart-title-perc ">03%</span> Business Operation</p>
        </div>
        <div class="chart-title-box ">
          <p class="chart-title "><span class="chart-title-perc ">04%</span> Product Development</p>
        </div>
        <div class="chart-title-box ">
          <p class="chart-title "><span class="chart-title-perc ">30%</span> Private Sales</p>
        </div>
        <div class="chart-title-box ">
          <p class="chart-title "><span class="chart-title-perc ">40%</span> Public Sales</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js "></script> 
<script>
var ctx = document.getElementById("myChart ").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    percentageInnerCutout: 40,
    data: {
        datasets: [{
            label: '# of Votes',
            data: [15, 3, 5, 3, 4, 30, 40],
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(155, 179, 54, 1)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(155, 179, 54, 1)'
            ],
            borderWidth: 1
        }]
    },
  options: {
    cutoutPercentage: 80
  }
});
</script>

Reference: https://heta.org/#myChart