getBarsAtEvent return []

[tom10271]

Code:

                    var $canvas = $result.find('canvas'),
                        context = $canvas[0].getContext("2d"),
                        json = $result.data('data'),
                        data = {
                            labels: [],
                            datasets: [{
                                label: "",
                                fillColor: "rgba(220,220,220,0.5)",
                                strokeColor: "rgba(220,220,220,1)",
                                highlightFill: "rgba(220,220,220,0.75)",
                                highlightStroke: "rgba(220,220,220,1)",
                                data: []
                            }]
                        };

                    json.forEach(function(option) {
                        data.labels.push(option.description);
                        data.datasets[0].data.push(option.vote_count);
                    });

                    $canvas.css('height', Number((data.labels.length + 1) * 40) + 'px');

                    var chart = new Chart(context).HorizontalBar(data, {
                            tooltipEv: ['mousemove']
                        }),
                        description = $('.polling-option-description');

                    $canvas.on('mousemove touchstart touchmove', function(evt) {
                        var bars = chart.getBarsAtEvent(evt);

                        // It returns [];
                        console.log(bars);
                    });

[tom10271]

This is due to wrong inRange function:

        inRange : function(chartX,chartY){
            return (chartY >= this.y - this.height/2 && chartY <= this.y + this.height/2) && (chartX >= this.left && chartX <= this.x);
        }

For the last part, it should be: chartX >= this.left && chartX <= this.x not chartX >= this.left && chartX <= this.right as there is no right property