With multiple charts on page, tooltips for each chart all show data from last updated chart

[bradherman]

I have created a page with a lot of charts on it in a grid. When I load all the data into the page and update the charts, everything works fine, however the charts all show the same tooltip data from the last updated chart. The label is correct (matches the x-value at the point), but the y-value is the same across all charts.

Here is my code:

<script>
  var paymentDailyChart, paymentWeeklyChart, paymentMonthlyChart,
    profitDailyChart, profitWeeklyChart, profitMonthlyChart,
    expensesDailyChart, expensesWeeklyChart, expensesMonthlyChart, options,
    config, default_data, update_data;

  options = {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  default_data = {
    labels: [0,0,0,0,0,0,0],
    datasets: [{
      fill: true,
      data: [0,0,0,0,0,0,0]
    }]
  };

  config = { type: 'line', options: options, data: default_data };

  paymentDailyChart = new Chart(document.getElementById("daily-payment-chart"), config);
  paymentWeeklyChart = new Chart(document.getElementById("weekly-payment-chart"), config);
  paymentMonthlyChart = new Chart(document.getElementById("monthly-payment-chart"), config);
  profitDailyChart = new Chart(document.getElementById("daily-profit-chart"), config);
  profitWeeklyChart = new Chart(document.getElementById("weekly-profit-chart"), config);
  profitMonthlyChart = new Chart(document.getElementById("monthly-profit-chart"), config);
  expensesDailyChart = new Chart(document.getElementById("daily-expenses-chart"), config);
  expensesWeeklyChart = new Chart(document.getElementById("weekly-expenses-chart"), config);
  expensesMonthlyChart = new Chart(document.getElementById("monthly-expenses-chart"), config);

  update_data = function(){
    $.getJSON('/stats_charts.json', function(data){
      paymentDailyChart.data.labels = data['days_payments']['labels'];
      paymentDailyChart.data.datasets[0].data = data['days_payments']['data'];
      paymentDailyChart.update();

      paymentWeeklyChart.data.labels = data['weeks_payments']['labels'];
      paymentWeeklyChart.data.datasets[0].data = data['weeks_payments']['data'];
      paymentWeeklyChart.update();

      paymentMonthlyChart.data.labels = data['months_payments']['labels'];
      paymentMonthlyChart.data.datasets[0].data = data['months_payments']['data'];
      paymentMonthlyChart.update();

      profitDailyChart.data.labels = data['days_profits']['labels'];
      profitDailyChart.data.datasets[0].data = data['days_profits']['data'];
      profitDailyChart.update();

      profitWeeklyChart.data.labels = data['weeks_profits']['labels'];
      profitWeeklyChart.data.datasets[0].data = data['weeks_profits']['data'];
      profitWeeklyChart.update();

      profitMonthlyChart.data.labels = data['months_profits']['labels'];
      profitMonthlyChart.data.datasets[0].data = data['months_profits']['data'];
      profitMonthlyChart.update();

      expensesDailyChart.data.labels = data['days_expenses']['labels'];
      expensesDailyChart.data.datasets[0].data = data['days_expenses']['data'];
      expensesDailyChart.update();

      expensesWeeklyChart.data.labels = data['weeks_expenses']['labels'];
      expensesWeeklyChart.data.datasets[0].data = data['weeks_expenses']['data'];
      expensesWeeklyChart.update();

      expensesMonthlyChart.data.labels = data['months_expenses']['labels'];
      expensesMonthlyChart.data.datasets[0].data = data['months_expenses']['data'];
      expensesMonthlyChart.update();

      $('#overlay').remove();
    });
  };

  update_data();

  window.setInterval(function(){
    update_data();
  }, 3600000);
</script>

With this code, the charts all look correct and have the right x and y axises and line data, but the tooltips show the correct x axis data for each chart (Mon, Tues, Weds... for daily charts; 1 week, 2 week, 3 week... for weekly charts; etc), but the value shown for every one is the value at the same index for the final chart (expensesMonthly)...

I've also noticed some other weird behavior on update... If I move the chart updates to a block after loading the data, all of the charts will have the exact same data... like this:

salaryDailyChart.data.labels = data['days_salary']['labels'];
salaryDailyChart.data.datasets[0].data = data['days_salary']['data'];
salaryWeeklyChart.data.labels = data['weeks_salary']['labels'];
salaryWeeklyChart.data.datasets[0].data = data['weeks_salary']['data'];
salaryMonthlyChart.data.labels = data['months_salary']['labels'];
salaryMonthlyChart.data.datasets[0].data = data['months_salary']['data'];

salaryDailyChart.update();
salaryWeeklyChart.update();
salaryMonthlyChart.update();

^ all 3 charts will be the exact same unless I update inline.

Any ideas?

[davidmichaelkarr]

I'm not an expert, but I would try defining separate config and data blocks for each chart. I'm guessing charts.js assumes that each config/data block is separate for each chart, so it's storing metadata specific to each chart in that area, but it's actually a shared area, because of what you've done here.

[etimberg]

@bradherman sharing the data object is not possible before v2.1.0. I think sharing configs will work. Can you put together a jsfiddle that reproduces this issue?

[bradherman]

@etimberg https://jsfiddle.net/83pzooLq/

Getting the issue there... Pardon me if it's a little messy, I don't ever write js these days... This has just been a fun little project for me

[bradherman]

Also as mentioned, if you run the update call all in a row, the charts will show the same data too... See this fiddle: https://jsfiddle.net/9ca0m7z3/

[etimberg]

So I'm pretty sure what the problem is. What happens is that the data object is the shared between all charts but the data in the data object is changed before each chart is created. When the tooltip displays, it goes back to the data object to query the data and hence looks at the last data

All the charts should have a unique data object if they are to have different data.
I updated your fiddle at https://jsfiddle.net/ckgwhfcy/1/

[bradherman]

@etimberg Ahhh, that makes sense... Would also explain why the charts would show the same information when updated after loading all the data in. Thanks a ton!

[etimberg]

np, glad I could help