JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="width:400px;height:400px;">
    <canvas id="myChart"></canvas>
</div>

<div style="margin-top:50px;">
	<button>Trigger Segment 1 Click</button>
	<button>Trigger Segment 2 Click</button>
	<button>Trigger Segment 3 Click</button>
</div>

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Segment 1', 'Segment 2', 'Segment 3'],
        datasets: [{
            data: [10, 10, 10]
        }]
    },
    options: {
        events: ['click'],
        cutoutPercentage: 70,
        legend: {
            display: false
        },
        tooltips: {
            displayColors: false
        },
        onClick: function(evt, elements) {}
    }
});

$(document).on('click', 'button', function(){
	var $this = $(this),
		index = $this.index();
	// magic to happen here!
});