Chartjs-Chartjs tooltip html: Use data to populate tooltip

by

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/

Leave a comment