ChartJS vertical line not removed on touchend

Question

I'm using this plugin to draw a vertical line where the user touches/hovers over the chart:

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      if (chart.tooltip._active && chart.tooltip._active.length) {
         var activePoint = chart.tooltip._active[0],
            ctx = chart.ctx,
            y_axis = chart.scales['y-axis-0'],
            x = activePoint.tooltipPosition().x,
            topY = y_axis.top,
            bottomY = y_axis.bottom;
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 1;
         ctx.strokeStyle = '#26D4A5';
         ctx.stroke();
         ctx.restore();
      }
   }
});

The line gets removed after the hovering ends, however if a touchend/touchcancel happens, the line is still there.

I tried adding afterEvent to the plugin like this:

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      if (chart.tooltip._active && chart.tooltip._active.length) {
         var activePoint = chart.tooltip._active[0],
            ctx = chart.ctx,
            y_axis = chart.scales['y-axis-0'],
            x = activePoint.tooltipPosition().x,
            topY = y_axis.top,
            bottomY = y_axis.bottom;
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 1;
         ctx.strokeStyle = '#26D4A5';
         ctx.stroke();
         ctx.restore();
      }
   },
   afterEvent: function(chart, e) {
     if(e.type=="mouseout"){
       alert("mouseout");
     }
     if(e.type=="touchend"){
       alert("touchend");
     }
     if(e.type=="mousemove"){
       alert("mouse move");
     }
   }
});

But the only events that work on touch are mousemove, touchend and mouseout do not work on mobile/touch. Is there any workaround?

Answer 1

Seems like the problem was that "touchend" event was removed from the default config.

Re-adding the event "touchend" to the options like this, removes the tooltip after touchend.

events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]

This was changed here: https://github.com/chartjs/Chart.js/pull/1644/files