reactjs - Unable to produce desired UI output for Chartjs tooltips

Question

I have the following scenario: x-axes: String date y-axes: Integers

2 data sets

When i hover over a particular data point, i want to display the following:

Data collected as of 2020-06-02
33,600
33,000
Diff: 600

Here is what i get instead:

Data collected as of undefined
33,600
33,000
Diff: NaN

Here is my tooltip callbacks code:

tooltips: {
    mode: 'index',
    intersect: false,
    callbacks: {
      title: function(toolTipItem, data) {
        return "Data points collected as of " + toolTipItem.xLabel;
        // return "Data points collected as of " + data.labels[toolTipItem.index];  // this did not work either
      },
      label: function(toolTipItem, data) {
        if (toolTipItem.datasetIndex === 0) {
          return toolTipItem.yLabel.toString().replace(/B(?<!.d*)(?=(d{3})+(?!d))/g, ',');
        } else if (toolTipItem.datasetIndex === 1) {
          return toolTipItem.yLabel.toString().replace(/B(?<!.d*)(?=(d{3})+(?!d))/g, ',');
        }
      },
      labelColor: function(toolTipItem, data){
        if (toolTipItem.datasetIndex === 0) {
          return {
            borderColor: 'rgba(196, 196, 196, 1)'
          };
        } else if (toolTipItem.datasetIndex === 1) {
          return {
            borderColor: 'rgba(127, 231, 106, 1)'
          };
        }
      },
      footer: function(toolTipItems, data) {
        let diff = 0;
        diff = parseInt(data.datasets[0].data[toolTipItems.index]) - parseInt(data.datasets[1].data[toolTipItems.index]);
        return 'Diff: ' + diff;  
        // return 'Diff: ' + diff.toString().replace(/B(?<!.d*)(?=(d{3})+(?!d))/g, ',');  // this did not work either
      }
    }
  },

I have followed the sample here: Sample tooltip callback use case from chartjs

Having said that, would like to know why in the documentation: chartjs docs Sometimes the argument is ToolTipItem[] and sometimes it is ToolTipItem. Am i missing something?

Thanks.

Answer 1

I figured out where I went wrong and what caused the confusion.

Under the label/labelColor attribute, I merely had to perform an equal check on toolTipItem.datasetIndex. This lead me to believe that I could call the attributes directly. However, when it came to any other attributes (i tried title, footer, afterBody), toolTipItem.datasetIndex did not exist and when i printed out the keys of the toolTipItem, i got [0, 1]. Upon further expansion of what the values of toolTipItem[0] and toolTipItem[1], i discovered a list of attributes which i was looking for (i.e. index, x/yLabel..).

This ultimately helped me solved the issue. So all i needed to do was:

...    
return "Data points collected as of " + toolTipItem[0].xLabel
...

for the title property and:

...
    diff = parseInt(data.datasets[0].data[toolTipItems[0].index]) - parseInt(data.datasets[1].data[toolTipItems[1].index]);
...

I am still not sure how come label & labelColor still could function if I did not specify the index for toolTipItem, but whatever the case is/was it is solved now. If someone could point out if i have a bug waiting to happen, it will be greatly appreciated.