CODEWITHSUNDEEP
jqueryhighchartspie-chart
Arsen Khachaturyan
Arsen Khachaturyan

Reputation: 8320

Highchart Pie Chart click on hover

How can I call mouse click event on pie chart on mouse hover? I tried something but it do click not so smoothly as I need. Here is code sample:

   plotOptions: {
        pie: {
            innerSize: '50%',
            size: 100,
            cursor: 'pointer',
            dataLabels: false
        },
        series: {
            allowPointSelect: true,
            type: 'pie',
            name: 'Coordinates',
            point: {
                events: {
                    mouseOver: function (e) {
                      pieChart.tooltip.hide();
                        var serie = this.series.data[this.x];
                        var waitBeforeSelect = setTimeout(function () {
                            clearTimeout(waitBeforeSelect);
                            serie.select();
                            serie.series.show();
                            pieChart.tooltip.refresh(serie);
                        }, 500);

                        var serieName = serie.name;
                        var textToShow = serieName.substr(0, serieName.indexOf(';'));
                        $('#pieChartInfoText').children().text(textToShow);
                        $('#pieChartInfoText').children().css('color', serie.color);
                    },
                    mouseOut: function () {
                        pieChart.tooltip.hide();
                    }
                }
            }
        }
    },

Upvotes: 1

Views: 5690

Answers (2)

Arsen Khachaturyan
Arsen Khachaturyan

Reputation: 8320

Thank you, Igor!

Yes, it helped me a lot but it as my own has some drawbacks: if you move the mouse over chart multiple times it will repeatedly go back and forth, it especially is visible on Donut chart.

Here is the code snippet:

series: {
            allowPointSelect: true,
            type: 'pie',
            name: 'Coordinates',
            point: {
                events: {
                    mouseOver: function (e) {
                        var serie = this.series.data[this.x];
                        if ((undefined == previousSerie) || (serie != previousSerie)) {
                            var point = this;

                            if (!point.selected) {
                                pieChart.tooltip.shared = true;

                                var timeout = setTimeout(function () {
                                    clearTimeout(timeout);
                                    point.firePointEvent('click');

                                    pieChart.tooltip.shared = false;
                                    pieChart.tooltip.refresh(point);
                                }, 700);
                            }

                            var serieName = serie.name;
                            var textToShow = serieName.substr(0, serieName.indexOf(';'));
                            $('#pieChartInfoText').children().text(textToShow);
                            $('#pieChartInfoText').children().css('color', serie.color);
                            previousSerie = serie;
                        } else {
                            previousSerie = serie;
                        }
                    },
                    mouseOut: function () {
                        //  pieChart.tooltip.hide();
                    }
                }
            }
        }

Upvotes: 0

user1823883
user1823883

Reputation: 11

If what you are really trying do do is simply select the point on mouseOver (what I needed to do that led me to your question), you can call this.select(true) in your mouseOver function. This doesn't have the timeout delay, but that could still be added.

Upvotes: 1

Related Questions