Chartjs-Doughnut chart – interaction with specific segment of a chart

by

0👍

✅

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


    };
    }
);

0👍

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!

Leave a comment