Interactive chart via ChartJS

Question

I am trying to make my graph interactive so I can click on the bars and then do some sort of action. Currently I am just trying to get it to interact properly so I am just trying to get it to console.log() the activePoints variable. But there is a problem in the following line:

var activePoints = barChart.getSegmentsAtEvent(evt);

I get the following error in my console:

Uncaught TypeError: barChart.getSegmentsAtEvent is not a function

Btw I have removed the barChartOption portion of the code to make it easier to read.

function graph(id) {
                var barChartCanvas = $("#" + id).get(0).getContext("2d");
                var barChart = new Chart(barChartCanvas);
                var barChartData = getAreaChartData();
                barChartData.datasets[0].fillColor = "#2E2EFE";
                barChartData.datasets[0].strokeColor = "#2E2EFE";
                barChartData.datasets[0].pointColor = "#2E2EFE";
                var barChartOptions = {
                };

                barChartOptions.datasetFill = false;
                barChart.Bar(barChartData, barChartOptions);

                $("#"+id).click( 
                    function(evt){
                        var activePoints = barChart.getSegmentsAtEvent(evt);
                        console.log("activePoints= ", activePoints);
                    }
                );  
            }
        });

I tried googling the error but could not find a solution for this issue. Is there anyone who can explain to me what I have done wrong?

Answer 1

I'm having an equivalent problem but with charts.js V2: even thought the code worked great on V1.1, not is completely useless.

This is the code I was using to trigger interaction between the legend and the chart:

    helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){
        helpers.addEvent(legendNode, 'mouseover', function(){
            var activeSegment = moduleDoughnut.segments[index];
            activeSegment.save();
            activeSegment.fillColor = activeSegment.highlightColor;
            moduleDoughnut.showTooltip([activeSegment]);
            activeSegment.restore();
        });
    });

As you can see, I had the "mouseover" event attached to every legend item. So when the item was hovered, the associated chart part got highlighted.

Now, I've been trying to get the same working using V2, but I just can't find any way to trigger events on the chart.

Any ideas?

---

Update:

Evert Timberg at the GIT repository gave me this wonderfull and elegant solution which I enhanced by adding the mouseout event:

Chart.helpers.each(document.getElementById('legendContainer').firstChild.childNodes, function(legendNode, index) {
Chart.helpers.addEvent(legendNode, 'mouseover', function() {
    var activeSegment = window.myDoughnut.data.datasets[0].metaData[index];
    window.myDoughnut.tooltip.initialize();
    window.myDoughnut.tooltip._active = [activeSegment];
    window.myDoughnut.tooltip.update(true);
    window.myDoughnut.render(window.myDoughnut.options.hover.animationDuration, true);
});
Chart.helpers.addEvent(legendNode, 'mouseout', function() {
    window.myDoughnut.tooltip._active = [];
    window.myDoughnut.tooltip.update(true);
});
});

This is the event trigger code for the legend items.

Answer 2

1. The method you should be using for a bar chart is getBarsAtEvent (getSegmentsAtEvent is for pie / doughnut and polar charts)

2. getBarsAtEvent is a method on the bar chart object i.e. the one returned by the .Bar call.

---

So you need 2 minor changes as shown below

...
var actualBarChart = barChart.Bar(barChartData, barChartOptions);
...
...
     var activePoints = actualBarChart.getBarsAtEvent(evt);
...