Chartjs-How to toggle between Custom tooltip and normal tooltip in chartjs and angular

by

0👍

After changing the tooltip options on an existing chart, you have to invoke chart.update().

If for example you let the user switch between default and custom tooltip mode, you could define an onclick event handler as follows.

<input type="checkbox" onclick='enableCustomTooltip(this.checked)'> Custom Tooltip
...
const enableCustomTooltip = function(enabled) {
  if (enabled) {    
    chart.options.tooltips = { enabled: false, custom: (tooltipModel) => customTooltip(tooltipModel) };
  } else {
    chart.options.tooltips = { enabled: true };
  }
  chart.update();
};

Please take a look at the following chart based on code from the Chart.js documentation and see how it works.

const customTooltip = function(tooltipModel) {
  var tooltipEl = document.getElementById('chartjs-tooltip');
  if (!tooltipEl) {
    tooltipEl = document.createElement('div');
    tooltipEl.id = 'chartjs-tooltip';
    tooltipEl.innerHTML = '<table></table>';
    document.body.appendChild(tooltipEl);
  }
  if (tooltipModel.opacity === 0) {
    tooltipEl.style.opacity = 0;
    return;
  }
  tooltipEl.classList.remove('above', 'below', 'no-transform');
  if (tooltipModel.yAlign) {
    tooltipEl.classList.add(tooltipModel.yAlign);
  } else {
    tooltipEl.classList.add('no-transform');
  }

  function getBody(bodyItem) {
    return bodyItem.lines;
  }

  if (tooltipModel.body) {
    var titleLines = tooltipModel.title || [];
    var bodyLines = tooltipModel.body.map(getBody);
    var innerHtml = '<thead>';
    titleLines.forEach(function(title) {
      innerHtml += '<tr><th>' + title + '</th></tr>';
    });
    innerHtml += '</thead><tbody>';
    bodyLines.forEach(function(body, i) {
      var colors = tooltipModel.labelColors[i];
      var style = 'background:' + colors.backgroundColor;
      style += '; border-color:' + colors.borderColor;
      style += '; border-width: 2px';
      var span = '<span style="' + style + '"></span>';
      innerHtml += '<tr><td>' + span + body + '</td></tr>';
    });
    innerHtml += '</tbody>';
    var tableRoot = tooltipEl.querySelector('table');
    tableRoot.innerHTML = innerHtml;
  }

  var position = chart.canvas.getBoundingClientRect();
  tooltipEl.style.opacity = 1;
  tooltipEl.style.position = 'absolute';
  tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
  tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
  tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
  tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
  tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
  tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
  tooltipEl.style.pointerEvents = 'none';
};

const enableCustomTooltip = function(enabled) {
  if (enabled) {    
    chart.options.tooltips = { enabled: false, custom: (tooltipModel) => customTooltip(tooltipModel) };
  } else {
    chart.options.tooltips = { enabled: true };
  }
  chart.update();
};

var chart = new Chart('myChart', {
  type: 'pie',
  data: {
    labels: ['January', 'February', 'March'],
    datasets: [{
      data: [50445, 33655, 15900],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  },
  options: {
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<input type="checkbox" onclick='enableCustomTooltip(this.checked)'> Custom Tooltip
<canvas id="myChart" height="90"></canvas>

Leave a comment