CODEWITHSUNDEEP
javascriptchartschart.js
Kieran McClung
Kieran McClung

Reputation: 724

ChartJS tooltip values aren't matching the data after updating multiple charts

I have three charts on my site and I'm updating them based on user interaction. The charts update just fine but the hover tooltip values do not. All charts appear to have the same tooltip data (pulled in from the last chart)

I've attached a simplified example which simulates the setup and issue:

HTML

<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
<canvas id="chart3"></canvas>

JavaScript/jQuery

$(document).ready(function () {
  let chartOptions = {
    type: "line",
    data: {
      datasets: [
        {
          data: [],
          backgroundColor: "rgba(0,0,0,0)",
          borderWidth: 3,
          pointRadius: 3
        }
      ]
    },
    options: {
      legend: {
        display: false
      },
      responsive: false
    }
  };

  const chart1Canvas = document.getElementById("chart1");
  const chart1Ctx = chart1Canvas.getContext("2d");
  const chart1 = new Chart(chart1Ctx, chartOptions);
  const chart2Canvas = document.getElementById("chart2");
  const chart2Ctx = chart2Canvas.getContext("2d");
  const chart2 = new Chart(chart2Ctx, chartOptions);
  const chart3Canvas = document.getElementById("chart3");
  const chart3Ctx = chart3Canvas.getContext("2d");
  const chart3 = new Chart(chart3Ctx, chartOptions);

  let data = {
    dataset1: [
      [6, "Label 1"],
      [2, "Label 2"],
      [3, "Label 3"],
      [2, "Label 4"],
      [0, "Label 5"]
    ],
    dataset2: [
      [2, "Label 1"],
      [4, "Label 2"],
      [0, "Label 3"],
      [2, "Label 4"],
      [1, "Label 5"]
    ],
    dataset3: [
      [2, "Label 1"],
      [0, "Label 2"],
      [6, "Label 3"],
      [2, "Label 4"],
      [4, "Label 5"]
    ]
  };

  handleData(data.dataset1, chart1);

  handleData(data.dataset2, chart2);

  handleData(data.dataset3, chart3);
});

function handleData(data, chart) {
  let chartData   = [];
  let chartLabels = [];

  $.each(data, function (i, value) {
    chartData.push(value[0]);
    chartLabels.push(value[1]);
  });
  
  chart.data.datasets.forEach((dataset) => {
    dataset.data = chartData;
  });

  chart.data.labels = chartLabels;
  
  chart.update();
}

When the three handleData functions are run, the charts update correctly, but when hovering over the data points the values of the third chart are shown.

I've been staring at this for too long now and I worry that I can't see the fix for the code so any help would be greatly appreciated!

Codepen example

Upvotes: 0

Views: 263

Answers (1)

AntiqTech
AntiqTech

Reputation: 717

Somehow it turns out that the issue is about options. You have to define different options for each chart. I fiddled with the codepen example. Here is what I come up with:

let chartOptions1 ..... ;

let chartOptions2  .....;

let chartOptions3  .....;
....
const chart1 = new Chart(chart1Ctx, chartOptions1);
const chart2 = new Chart(chart2Ctx, chartOptions2);
const chart3 = new Chart(chart3Ctx, chartOptions3);

After defining and using different options for each chart, I was able to see appropriate tooltips for each charts. Try it and let me know the result.

Upvotes: 1

Related Questions