pie-customTooltips.html 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Pie 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-holder {
  9. width: 100%;
  10. margin-top: 50px;
  11. text-align: center;
  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-holder" style="width: 50px;">
  34. <canvas id="chart-area1" width="50" height="50" />
  35. </div>
  36. <div id="canvas-holder" style="width: 300px;">
  37. <canvas id="chart-area2" width="300" height="300" />
  38. </div>
  39. <div id="chartjs-tooltip"></div>
  40. <script>
  41. Chart.defaults.global.tooltips.custom = function(tooltip) {
  42. // Tooltip Element
  43. var tooltipEl = $('#chartjs-tooltip');
  44. if (!tooltipEl[0]) {
  45. $('body').append('<div id="chartjs-tooltip"></div>');
  46. tooltipEl = $('#chartjs-tooltip');
  47. }
  48. // Hide if no tooltip
  49. if (!tooltip.opacity) {
  50. tooltipEl.css({
  51. opacity: 0
  52. });
  53. $('.chartjs-wrap canvas')
  54. .each(function(index, el) {
  55. $(el).css('cursor', 'default');
  56. });
  57. return;
  58. }
  59. $(this._chart.canvas).css('cursor', 'pointer');
  60. // Set caret Position
  61. tooltipEl.removeClass('above below no-transform');
  62. if (tooltip.yAlign) {
  63. tooltipEl.addClass(tooltip.yAlign);
  64. } else {
  65. tooltipEl.addClass('no-transform');
  66. }
  67. // Set Text
  68. if (tooltip.body) {
  69. var innerHtml = [
  70. (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 || [])
  71. .join('\n'), (tooltip.footer || []).join('\n'), (tooltip.afterFooter || []).join('\n')
  72. ];
  73. tooltipEl.html(innerHtml.join('\n'));
  74. }
  75. // Find Y Location on page
  76. var top = 0;
  77. if (tooltip.yAlign) {
  78. if (tooltip.yAlign == 'above') {
  79. top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
  80. } else {
  81. top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
  82. }
  83. }
  84. var position = $(this._chart.canvas)[0].getBoundingClientRect();
  85. // Display, position, and set styles for font
  86. tooltipEl.css({
  87. opacity: 1,
  88. width: tooltip.width ? (tooltip.width + 'px') : 'auto',
  89. left: position.left + tooltip.x + 'px',
  90. top: position.top + top + 'px',
  91. fontFamily: tooltip._fontFamily,
  92. fontSize: tooltip.fontSize,
  93. fontStyle: tooltip._fontStyle,
  94. padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
  95. });
  96. };
  97. var config = {
  98. type: 'pie',
  99. data: {
  100. datasets: [{
  101. data: [300, 50, 100, 40, 10],
  102. backgroundColor: [
  103. "#F7464A",
  104. "#46BFBD",
  105. "#FDB45C",
  106. "#949FB1",
  107. "#4D5360",
  108. ],
  109. }],
  110. labels: [
  111. "Red",
  112. "Green",
  113. "Yellow",
  114. "Grey",
  115. "Dark Grey"
  116. ]
  117. },
  118. options: {
  119. responsive: true,
  120. legend: {
  121. display: false
  122. },
  123. tooltips: {
  124. enabled: false,
  125. }
  126. }
  127. };
  128. window.onload = function() {
  129. var ctx1 = document.getElementById("chart-area1").getContext("2d");
  130. window.myPie = new Chart(ctx1, config);
  131. var ctx2 = document.getElementById("chart-area2").getContext("2d");
  132. window.myPie = new Chart(ctx2, config);
  133. };
  134. </script>
  135. </body>
  136. </html>