Creating custom interpolation interaction mode

[life-of-e]

I'm having trouble loading the crosshair plugin (1.1.6) on Chart.js 3.3.0 (the plugin generates many errors such as type errors for undefined items when adding non-interpolated items). I also tried just using the interpolation portion of crosshair but it fails at the same points so I thought to try and write a very simple custom one. However, using the crosshair as an example I don't seem to be returning the points correctly because chart.js itself crashes out.

I'm using the min version so the location is: chart.3.3.0.min.js:13:147205 so the specific text of the code is {label:a,value:r}=s.getLabelAndValue(o); and the browser reports that s is null. I believe this is line 119 in src/plugins/plugin.tooltip.js

The only thing I want to do is interpolate points on all visible datasets to use in a custom tooltip because some of the datasets are sparse compared to others so I want to be able to get an intermediate value. The available interaction modes don't do this or gather the wrong values and without crosshair working I don't have access to its interpolation routine.

Here are the critical parts of the code I've written thus far based on what is in crosshair (skipping the calculations which I know work since I've single stepped through that part) so I'd appreciate help figuring out what should truly go into a point to be returned to chart.js that will make it happy.

Chart.Interaction.modes.interpolate = function(chart, e, options)
{
   for ( var datasetIndex = 0; datasetIndex < chart.data.datasets.length; datasetIndex++ )
   {
    //calculations go here
    //I generate an xValue and a yValue for each point and yPosition from the yValue
    //datasetIndex is also generated in the loop
   //everything is appended to items[]

    point = {
    value: xValue,
    xValue: xValue,
    tooltipPosition: function() { return this._model; },
    hasValue: function() { return true; },
    _model: { x: e.x, y: yPosition },
    _datasetIndex: datasetIndex,
    _xScale: { getLabelForIndex: function(idx) { return items[idx].xValue; } },
    _yScale: { getLabelForIndex: function(idx) { return items[idx].value; } },
    _chart: chart
    };
   items.push(point);
   }

  return items;

}

[LeeLenaleee]

The croshair plugin is not compatible with chart.js version 3 at the moment
Issue: AbelHeinsbroek/chartjs-plugin-crosshair#58,
open PR for it: AbelHeinsbroek/chartjs-plugin-crosshair#65

[life-of-e]

Yes, I saw that it wasn't compatible, I just wanted to find out what the proper return value is for an interpolation function that would be. I don't necessarily need crosshair, just the interpolation.

[kurkle]

Chart.js v3 line has build in interpolation. Passing that to the tooltip is not straight forward, but can be done: https://codepen.io/kurkle/pen/WNpdwgE (updated for not interpolating hidden lines)

[kurkle]

mouseout probably works too

[life-of-e]

Well that removes the markers but leaves the tooltip.

[life-of-e]

I should say that the leftover interpolation markers are minor, the solution itself works extremely well especially on the datasets that I have.

[kurkle]

Updated the pen once more to use the mouseout event that is enabled by default (and needed by the tooltip plugin)

[life-of-e]

I'll have to play with it a bit. If I add the afterEvent handler to the plugin registration the tooltip and interpolation markers stop functioning (they no longer appear when hovering over the chart). Removing afterEvent brings back both items. I'm using custom tooltips rather than the built in one but I don't see how that should cause a problem since the tooltip is being handled by the provided callbacks.

[dladeira]

@kurkle
What about v4? It appears that the getLabelAndValue function was removed.

[kurkle]

Nothing really changed for v4:
https://codepen.io/kurkle/pen/OPJRJYN

[SaraHasan224]

For version 4
I noticed that when I apply scaleX transformations linear / time to the scatter chart (v4), some of the tooltip labels—particularly for points in the middle—seem to disappear or are not detected. Could you please help me understand why applying the scale might be affecting the tooltip's ability to register those points? Any insights would be greatly appreciated. Thank you! @kurkle
Sample code attached:
https://codepen.io/Sara-Hasan-the-animator/pen/NPWYgqe