JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="chartDonnut"></canvas>
<div class="redSection">
    <p>Red Section</p>
</div>
<div class="orangeSection">
    <p>Orange Section</p>
</div>
<div class="yellowSection">
    <p>Yellow Section</p>
</div>
<div class="greenSection">
    <p>Green Section</p>
</div>

CSS

div{
    padding: 300px 0;
}

#chartDonnut{
    margin-bottom: 90px;
}

.redSection{
    background: #ad1f27;
}

.orangeSection{
    background: #c26828;
}

.yellowSection{
    background: #c3b830;
}

.greenSection{
    background: #14773c;
}

JavaScript

// Chart
var barData = {
    labels: ['Red', 'Orange', 'Yellow', 'Green']
};


var pieData = [{
    value: 40,
    color: "#ad1f27",
    highlight: "#ad474c",
    label: "Red"
}, {
    value: 40,
    color: "#c26828",
    highlight: "#c27e4d",
    label: "Orange"
}, {
    value: 10,
    color: "#c3b830",
    highlight: "#c3bc6b",
    label: "Yellow"
}, {
    value: 10,
    color: "#14773c",
    highlight: "#2da15b",
    label: "Green"
}];

var options = {
    segmentShowStroke: false
};

Chart.defaults.global.responsive = true;

var context = document.getElementById('chartDonnut').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData, options);

$("#chartDonnut").click(function(evt) {
    var sector = skillsChart.getSegmentsAtEvent(evt)[0].label;
    document.getElementsByClassName(sector.toLowerCase()+'Section')[0].scrollIntoView();
});