Doughnut chart - interaction with specific segment of a chart

Question

I'm trying to create a simple doughnut chart with chartjs. I've been digging through the Documentation and Stack (of course), but I couldn't find it.
Here is my code: https://jsfiddle.net/zyqtyna7/1/

<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>
<script>
    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 
});
})   

I'm not sure, but I think that the biggest question is: how can I target a specific segment of a chart (and then do something with it)? I'm asking this, because my project requires that:

1. descriptions in paragraphs will be visible after user's click at related part of chart (how can I target this segment???);
2. tooltips will have only labels' name (no values) (I couldn't decipher the Documentation);
3. chart animation should be triggered with scroll (segments will appear in sequence after scrolling - is it even possible?)

I'll be very greatfull for any insight - I'm stuck!

Answer 1

I managed to do 2 of 3.. and I found documentation on how to do the third one.. But I was not able to make it work :/.... (i will try again when i have a bit more of time).

So here is the JSfiddle with this modifications:

1:Data is shown on mouse click 2:On top labels are shown, but when you click you wont see any labels but a black mark

JSFIDDLE

So what did I do?

options: {
    // This chart will not respond to mousemove, etc
    events: ['click'],
    tooltips: {
       callbacks: {
          label: function(tooltipItem) 
          {
             return tooltipItem.yLabel;
          }
                  }
              }
    }

I added the options part with those codes.

the events:['click'] makes the labels show when you click a part of the chart instead of hovering it.

the tooltips with the callbacks "turn off" showing the labels on mouse click.

And for the other part that you ask, about showing the animation when you scroll to the part where the chart is I found this 2 links that tells you how to do so (I couldn't make it work, but I will try again when I have more time and update).

Link1

Link2

Please let me know if this is what you wanted to know! CHEERS!

Answer 2

OMG! Now I know. It took me so many hours, but was so obvious! Here's my new - working - code: https://jsfiddle.net/m954jto4/ Documentation of Chartjs and same basic js script - that's all, what I needed (shame on me!).

<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>

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");
    }
    }


    };
    }
);