score:1

you can achieve what you want if you disable the default tooltip and create a custom one.

if you have access to the php api, i would personally change the data so that the date is on the x axis rather than just numbers.

var customtooltip = function(tooltip) {
  $(this._chart.canvas).css('cursor', 'pointer');

  var positiony = this._chart.canvas.offsettop;
  var positionx = this._chart.canvas.offsetleft;

  $('.chart-tooltip').css({
    opacity: 0
  });

  if (!tooltip || !tooltip.opacity) {
    return;
  }

  if (tooltip.datapoints.length > 0) {
    tooltip.datapoints.foreach(function(datapoint) {
      var content = extra[datapoint.index];

      $('#tooltip').html(content);
      $('#tooltip').css({
        opacity: 1,
        top: positiony + datapoint.y + 'px',
        left: positionx + datapoint.x + 'px',
      });
    });
  }
};

i have created a fiddle to demonstrate using your data: https://jsfiddle.net/y01ewbtz/


Related Query

More Query from same tag