score:1

Accepted answer

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


Related Query

More Query from same tag