Unable to produce desired UI output for Chartjs tooltips

๐Ÿ‘:-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.

Leave a comment