Chartjs-Tooltips on multiple charts in chart.js showing the wrong values

by

0👍

Trying to post my code on jsfiddle, I was able to find the solution to this very odd problem. I had

     var barCharData = {
                    labels: ["2", "3", "4"],
                    datasets: []
                };

, so there is no data in any of my charts at the beginning (before getting data from database). For every chart I have I did something like this:

 for(var i=1; i <= number_of_charts; i++){
        bar_char_data_array.push(barChartData);
        var myBar = new Chart(ctx, {
                    type: 'bar',
                    data: bar_char_data_array[i-1],
                    options: {
                        tooltips: {
                            mode: 'label',
                            intersect: true
                        }
                    }
                });
}

It turned out that javascript considers every element of array “bar_char_data_array” to be the same object and changing data for one of the charts resulted in changing data for all the rest. I still don’t know why all the charts were correct until hovered to see tooltip. Nevertheless, solution for my problem was to remove barChartData variable.

 for(var i=1; i <= number_of_charts; i++){
        bar_char_data_array.push({
            labels: ["2", "3", "4"],
            datasets: []
        });
        var myBar = new Chart(ctx, {
                    type: 'bar',
                    data: bar_char_data_array[i-1],
                    options: {
                        tooltips: {
                            mode: 'label',
                            intersect: true
                        }
                    }
                });
}

0👍

My solution was somewhat similar to the @queen-juliet’s answer.

I had a shared config variable with the data key being added and updated within a loop. Even though the multiple chart.js objects I had on the page were showing the correct data, the tooltips were shown on one (random) chart only. The solution was to declare and fill the whole config inside my loop instead.

Leave a comment