line-customTooltips.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Line Chart with Custom Tooltips</title>
  5. <script src="../dist/Chart.bundle.js"></script>
  6. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  7. <style>
  8. canvas{
  9. -moz-user-select: none;
  10. -webkit-user-select: none;
  11. -ms-user-select: none;
  12. }
  13. #chartjs-tooltip {
  14. opacity: 1;
  15. position: absolute;
  16. background: rgba(0, 0, 0, .7);
  17. color: white;
  18. border-radius: 3px;
  19. -webkit-transition: all .1s ease;
  20. transition: all .1s ease;
  21. pointer-events: none;
  22. -webkit-transform: translate(-50%, 0);
  23. transform: translate(-50%, 0);
  24. }
  25. .chartjs-tooltip-key {
  26. display: inline-block;
  27. width: 10px;
  28. height: 10px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="canvas-holder1" style="width:75%;">
  34. <canvas id="chart1"/>
  35. </div>
  36. <script>
  37. window.count = 0;
  38. Chart.defaults.global.pointHitDetectionRadius = 1;
  39. var customTooltips = function(tooltip) {
  40. // Tooltip Element
  41. var tooltipEl = $('#chartjs-tooltip');
  42. if (!tooltipEl[0]) {
  43. $('body').append('<div id="chartjs-tooltip"></div>');
  44. tooltipEl = $('#chartjs-tooltip');
  45. }
  46. // Hide if no tooltip
  47. if (!tooltip.opacity) {
  48. tooltipEl.css({
  49. opacity: 0
  50. });
  51. $('.chartjs-wrap canvas')
  52. .each(function(index, el) {
  53. $(el).css('cursor', 'default');
  54. });
  55. return;
  56. }
  57. $(this._chart.canvas).css('cursor', 'pointer');
  58. // Set caret Position
  59. tooltipEl.removeClass('above below no-transform');
  60. if (tooltip.yAlign) {
  61. tooltipEl.addClass(tooltip.yAlign);
  62. } else {
  63. tooltipEl.addClass('no-transform');
  64. }
  65. // Set Text
  66. if (tooltip.body) {
  67. var innerHtml = [
  68. (tooltip.beforeTitle || []).join('\n'), (tooltip.title || []).join('\n'), (tooltip.afterTitle || []).join('\n'), (tooltip.beforeBody || []).join('\n'), (tooltip.body || []).join('\n'), (tooltip.afterBody || []).join('\n'), (tooltip.beforeFooter || [])
  69. .join('\n'), (tooltip.footer || []).join('\n'), (tooltip.afterFooter || []).join('\n')
  70. ];
  71. tooltipEl.html(innerHtml.join('\n'));
  72. }
  73. // Find Y Location on page
  74. var top = 0;
  75. if (tooltip.yAlign) {
  76. if (tooltip.yAlign == 'above') {
  77. top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
  78. } else {
  79. top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
  80. }
  81. }
  82. var position = $(this._chart.canvas)[0].getBoundingClientRect();
  83. // Display, position, and set styles for font
  84. tooltipEl.css({
  85. opacity: 1,
  86. width: tooltip.width ? (tooltip.width + 'px') : 'auto',
  87. left: position.left + tooltip.x + 'px',
  88. top: position.top + top + 'px',
  89. fontFamily: tooltip._fontFamily,
  90. fontSize: tooltip.fontSize,
  91. fontStyle: tooltip._fontStyle,
  92. padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
  93. });
  94. };
  95. var randomScalingFactor = function() {
  96. return Math.round(Math.random() * 100);
  97. };
  98. var lineChartData = {
  99. labels: ["January", "February", "March", "April", "May", "June", "July"],
  100. datasets: [{
  101. label: "My First dataset",
  102. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  103. }, {
  104. label: "My Second dataset",
  105. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  106. }]
  107. };
  108. window.onload = function() {
  109. var chartEl = document.getElementById("chart1");
  110. window.myLine = new Chart(chartEl, {
  111. type: 'line',
  112. data: lineChartData,
  113. options: {
  114. title:{
  115. display:true,
  116. text:'Chart.js Line Chart - Custom Tooltips'
  117. },
  118. tooltips: {
  119. enabled: false,
  120. custom: customTooltips
  121. }
  122. }
  123. });
  124. };
  125. </script>
  126. </body>
  127. </html>