External HTML Tooltip

This sample shows how to use the external tooltip functionality to generate an HTML tooltip.

External HTML Tooltip - 图1

config setup external

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. interaction: {
  6. mode: 'index',
  7. intersect: false,
  8. },
  9. plugins: {
  10. title: {
  11. display: true,
  12. text: 'Chart.js Line Chart - External Tooltips'
  13. },
  14. tooltip: {
  15. enabled: false,
  16. position: 'nearest',
  17. external: externalTooltipHandler
  18. }
  19. }
  20. }
  21. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100, decimals: 0};
  3. const data = {
  4. labels: Utils.months({count: DATA_COUNT}),
  5. datasets: [
  6. {
  7. label: 'Dataset 1',
  8. data: Utils.numbers(NUMBER_CFG),
  9. fill: false,
  10. borderColor: Utils.CHART_COLORS.red,
  11. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12. },
  13. {
  14. label: 'Dataset 2',
  15. data: Utils.numbers(NUMBER_CFG),
  16. fill: false,
  17. borderColor: Utils.CHART_COLORS.blue,
  18. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  19. },
  20. ]
  21. };
  1. const getOrCreateTooltip = (chart) => {
  2. let tooltipEl = chart.canvas.parentNode.querySelector('div');
  3. if (!tooltipEl) {
  4. tooltipEl = document.createElement('div');
  5. tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)';
  6. tooltipEl.style.borderRadius = '3px';
  7. tooltipEl.style.color = 'white';
  8. tooltipEl.style.opacity = 1;
  9. tooltipEl.style.pointerEvents = 'none';
  10. tooltipEl.style.position = 'absolute';
  11. tooltipEl.style.transform = 'translate(-50%, 0)';
  12. tooltipEl.style.transition = 'all .1s ease';
  13. const table = document.createElement('table');
  14. table.style.margin = '0px';
  15. tooltipEl.appendChild(table);
  16. chart.canvas.parentNode.appendChild(tooltipEl);
  17. }
  18. return tooltipEl;
  19. };
  20. const externalTooltipHandler = (context) => {
  21. // Tooltip Element
  22. const {chart, tooltip} = context;
  23. const tooltipEl = getOrCreateTooltip(chart);
  24. // Hide if no tooltip
  25. if (tooltip.opacity === 0) {
  26. tooltipEl.style.opacity = 0;
  27. return;
  28. }
  29. // Set Text
  30. if (tooltip.body) {
  31. const titleLines = tooltip.title || [];
  32. const bodyLines = tooltip.body.map(b => b.lines);
  33. const tableHead = document.createElement('thead');
  34. titleLines.forEach(title => {
  35. const tr = document.createElement('tr');
  36. tr.style.borderWidth = 0;
  37. const th = document.createElement('th');
  38. th.style.borderWidth = 0;
  39. const text = document.createTextNode(title);
  40. th.appendChild(text);
  41. tr.appendChild(th);
  42. tableHead.appendChild(tr);
  43. });
  44. const tableBody = document.createElement('tbody');
  45. bodyLines.forEach((body, i) => {
  46. const colors = tooltip.labelColors[i];
  47. const span = document.createElement('span');
  48. span.style.background = colors.backgroundColor;
  49. span.style.borderColor = colors.borderColor;
  50. span.style.borderWidth = '2px';
  51. span.style.marginRight = '10px';
  52. span.style.height = '10px';
  53. span.style.width = '10px';
  54. span.style.display = 'inline-block';
  55. const tr = document.createElement('tr');
  56. tr.style.backgroundColor = 'inherit';
  57. tr.style.borderWidth = 0;
  58. const td = document.createElement('td');
  59. td.style.borderWidth = 0;
  60. const text = document.createTextNode(body);
  61. td.appendChild(span);
  62. td.appendChild(text);
  63. tr.appendChild(td);
  64. tableBody.appendChild(tr);
  65. });
  66. const tableRoot = tooltipEl.querySelector('table');
  67. // Remove old children
  68. while (tableRoot.firstChild) {
  69. tableRoot.firstChild.remove();
  70. }
  71. // Add new children
  72. tableRoot.appendChild(tableHead);
  73. tableRoot.appendChild(tableBody);
  74. }
  75. const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas;
  76. // Display, position, and set styles for font
  77. tooltipEl.style.opacity = 1;
  78. tooltipEl.style.left = positionX + tooltip.caretX + 'px';
  79. tooltipEl.style.top = positionY + tooltip.caretY + 'px';
  80. tooltipEl.style.font = tooltip.options.bodyFont.string;
  81. tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
  82. };

Docs