highchart donut - click on slice opens page by searching from userService

Question

I have a donut pie chart. on click of legend item it navigates to particular page which it retrieves from userSevice like given below -

pic of user service]1

legendItemClick:

function(e) { debugger;
    this.userService.search(e.target.id);
    return false;
}.bind(this)

i am looking for same functionality when i click on the pie slices of the chart it should navigate to particular related page. i tried this below but was not successful -

point: {
    events: {   
        click: function(e){
            this.userService.search(e.target.id);
            return false;
        }.bind(this)
    }
}

any help where Iam going wrong ?

userService -

  search(id: any) {
        let headers = new Headers();


        let data = { "jql": id };
        let body = JSON.stringify(data);
        let http: Http
       var method = method || "post";
        var params;
        var path ;       
        path = ' http://imptdg/IMR/Ticket/DashBoard';
                var form = document.createElement("form");
                form.setAttribute("method", method);
                form.setAttribute("action", path);          
                        var hiddenField = document.createElement("input");
                        hiddenField.setAttribute("type", "hidden");
                        hiddenField.setAttribute("name", 'jql');
                        hiddenField.setAttribute("value", id);
                        form.appendChild(hiddenField);
                document.body.appendChild(form); debugger;
                form.submit();



    }


defaults() {
    this.options = {

        title: { text: ' ' },
        colors: ['rgba(79, 162, 189, 1)', 'rgba(84, 135, 201, 1)', 'rgba(143, 185, 91, 1)', 'rgba(90, 183, 130, 1)', 'rgba(71, 195, 185, 1)', 'rgba(190, 120, 203, 1)', 'rgba(228, 211, 84, 1)', 'rgba(43, 144, 143, 1)', 'rgba(145, 232, 225, 1)'],
        chart: {
            type: 'pie',
            animation: true
        },
        credits: {
            enabled: false
        },
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 300
                },
                chartOptions: {
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'vertical',
                        labelFormatter: function () {
                            return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px; font-family:Helvetica ">' + this.name +
                                '</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
                                '</span></div> ';
                        }
                    },
                    pie: {
                        size: 50,
                        innerSize: 20
                    }
                }
            }]
        },

        plotOptions: {
            pie: {
                innerSize: '40%',
                allowPointSelect: true,
                slicedOffset: 0,                    
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },

                showInLegend: true,                                   
                 point: {
                    events: {   
                        click:function(e){ 
                            this.userService.search(e.target.id); // this part not working
                            return false;
                        }.bind(this), 

                        legendItemClick: function (e) { 

                            this.userService.search(e.target.id);
                            return false;
                        }.bind(this),

                    }

                    },
                states: {
                    hover: {
                        halo: {
                            size: 0
                        },
                        enabled : true
                    }
                }
            },

            series: {
                animation: false,

                }

                },




        },

        legend: {
            useHTML: true,
            enabled: true,
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            symbolHeight: 12,
            itemMarginBottom: 1,
            symbolWidth: 25,
            symbolRadius: 1,
            labelFormatter: function () {
                return '<div style="width:180px;"><div class="pull-left" style= "font-weight: 500; padding-bottom: 3px;padding-top:3px;  width: 130px; font-family:Helvetica; white-space: normal; word-break:break-word ">' + this.name 

            },


            },
        },

        series: [{
            data: this.donutchartData,
            allowPointSelect: true
        }]
    };

}

}

Answer 1

it is working now, i have gone through the api documentation of highchart donut - https://api.highcharts.com/highcharts/plotOptions.pie.events.click. now it is navigating and taing me to proper page that i was looking for.

point: {
                            events: {   
                                click:function(e){ 

                                    this.userService.search(e.point.id);

                                }.bind(this)