[Chartjs]-Printing a list by clicking chart Chart js + react

well after some mixed tutorials and guides, i came with the solution

Piechart.js:

import React,{ Component } from 'react';
import {Chart} from 'react-chartjs-2';

class Piechart extends Component {
    constructor(props){
        super(props)
        this.chartReference = React.createRef();
        this.state = {
            data:[]
        };
    }

    async componentDidMount(){
        const url = "https://api-tesis-marco.herokuapp.com/api/v1/questiondata/"+this.props.title;
        const data = await fetch(url)
        .then(response => response.json());
        this.setState({data:data});

        var datasets = [{data: this.state.data.map(d=>d.Count),
            backgroundColor: this.props.colors
        },
        {
            data: this.state.data.map(d=>d.Percent)
        },
        {
            data: this.state.data.map(d=>d.Who)}]

        this.myChart = new Chart(this.chartReference.current,{
            type: 'pie',
            data:{
                labels: this.state.data.map(d=>d.Answer),
                datasets: [{
                    data: datasets[0].data,
                    backgroundColor: datasets[0].backgroundColor
                }] 
            },
            options: {
                title: {
                    display: true,
                    text: this.props.title,
                    fontSize: 20,
                    fontStyle: 'bold'
                },
                legend: {
                    position:'right'
                },
                tooltips:{
                    callbacks: {
                        title: function(tooltipItem, data) {
                          return 'Respuesta:'+data['labels'][tooltipItem[0]['index']];
                        },
                        label: function(tooltipItem, data) {
                          return 'Total:'+data['datasets'][0]['data'][tooltipItem['index']];
                        },
                        afterLabel: function(tooltipItem) {
                          var dataset = datasets[1];
                          var total = dataset['data'][tooltipItem['index']]
                          return '(' + total+ '%)';
                        }
                      },
                      backgroundColor: '#FFF',
                      titleFontSize: 16,
                      titleFontColor: '#0066ff',
                      bodyFontColor: '#000',
                      bodyFontSize: 14,
                      displayColors: false
                },
                onClick: clicked
            }
        });

        function clicked(evt){
            var element = this.getElementAtEvent(evt);
            if(element[0]){
                var idx = element[0]['_index'];
                var who = datasets[2].data[idx];
                alert(who);
            }
        }
    }
    

    
    render(){
        return(
            <canvas ref={this.chartReference} />
        )
    }
}


export default Piechart;

as you can see i only set an datasets array outside

 var datasets = [{
            data: this.state.data.map(d=>d.Count),
            backgroundColor: this.props.colors
        },
        {
            data: this.state.data.map(d=>d.Percent)
        },
        {
            data: this.state.data.map(d=>d.Who)}]

this contains all the datasets of the request, then in the chart instance i only pass the dataset i want to plot, then for my question, in the clicked function only call the element of the array wich contains the list of users for the specific answer

Cliked function:

        function clicked(evt){
            var element = this.getElementAtEvent(evt);
            if(element[0]){
                var idx = element[0]['_index'];
                var who = datasets[2].data[idx];
                alert(who);
            }
        }

i made a custom tooltip as well, but i have an issue with this(with the default tooltip is the same) because i use this component to plot 4 piecharts but when i hover the mouse only 2 of the 4 charts show me the tooltip, the 2 chart who shows the tooltip are random (when refresh localhost pick randomly 2 of the 4 charts), and i don’t know what is happend or how to fix this, i hope this is usefull to someone