pie-customTooltips.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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. padding: 3px;
  19. border-radius: 3px;
  20. -webkit-transition: all .1s ease;
  21. transition: all .1s ease;
  22. pointer-events: none;
  23. -webkit-transform: translate(-50%, 0);
  24. transform: translate(-50%, 0);
  25. }
  26. #chartjs-tooltip.below {
  27. -webkit-transform: translate(-50%, 0);
  28. transform: translate(-50%, 0);
  29. }
  30. #chartjs-tooltip.below:before {
  31. border: solid;
  32. border-color: #111 transparent;
  33. border-color: rgba(0, 0, 0, .8) transparent;
  34. border-width: 0 8px 8px 8px;
  35. bottom: 1em;
  36. content: "";
  37. display: block;
  38. left: 50%;
  39. position: absolute;
  40. z-index: 99;
  41. -webkit-transform: translate(-50%, -100%);
  42. transform: translate(-50%, -100%);
  43. }
  44. #chartjs-tooltip.above {
  45. -webkit-transform: translate(-50%, -100%);
  46. transform: translate(-50%, -100%);
  47. }
  48. #chartjs-tooltip.above:before {
  49. border: solid;
  50. border-color: #111 transparent;
  51. border-color: rgba(0, 0, 0, .8) transparent;
  52. border-width: 8px 8px 0 8px;
  53. bottom: 1em;
  54. content: "";
  55. display: block;
  56. left: 50%;
  57. top: 100%;
  58. position: absolute;
  59. z-index: 99;
  60. -webkit-transform: translate(-50%, 0);
  61. transform: translate(-50%, 0);
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <div id="canvas-holder">
  67. <canvas id="chart-area1" width="50" height="50" />
  68. </div>
  69. <div id="canvas-holder">
  70. <canvas id="chart-area2" width="300" height="300" />
  71. </div>
  72. <div id="chartjs-tooltip"></div>
  73. <script>
  74. Chart.defaults.global.customTooltips = function(tooltip) {
  75. // Tooltip Element
  76. var tooltipEl = $('#chartjs-tooltip');
  77. // Hide if no tooltip
  78. if (!tooltip) {
  79. tooltipEl.css({
  80. opacity: 0
  81. });
  82. return;
  83. }
  84. // Set caret Position
  85. tooltipEl.removeClass('above below');
  86. tooltipEl.addClass(tooltip.yAlign);
  87. // Set Text
  88. tooltipEl.html(tooltip.text);
  89. // Find Y Location on page
  90. var top;
  91. if (tooltip.yAlign == 'above') {
  92. top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
  93. } else {
  94. top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
  95. }
  96. //Function to find absolution position of the element and not just it's relative position
  97. function getPosition (element) {
  98. var top = 0, left = 0;
  99. do {
  100. top += element.offsetTop || 0;
  101. left += element.offsetLeft || 0;
  102. element = element.offsetParent;
  103. } while (element);
  104. return {
  105. top: top,
  106. left: left
  107. };
  108. };
  109. //Finding absolute position of the chart canvas
  110. var position = getPosition(tooltip.chart.canvas)
  111. // Display, position, and set styles for font
  112. tooltipEl.css({
  113. opacity: 1,
  114. left: position.left + tooltip.x + 'px',
  115. top: position.top + top + 'px',
  116. fontFamily: tooltip.fontFamily,
  117. fontSize: tooltip.fontSize,
  118. fontStyle: tooltip.fontStyle,
  119. });
  120. };
  121. var pieData = [{
  122. value: 300,
  123. color: "#F7464A",
  124. highlight: "#FF5A5E",
  125. label: "Red"
  126. }, {
  127. value: 50,
  128. color: "#46BFBD",
  129. highlight: "#5AD3D1",
  130. label: "Green"
  131. }, {
  132. value: 100,
  133. color: "#FDB45C",
  134. highlight: "#FFC870",
  135. label: "Yellow"
  136. }, {
  137. value: 40,
  138. color: "#949FB1",
  139. highlight: "#A8B3C5",
  140. label: "Grey"
  141. }, {
  142. value: 120,
  143. color: "#4D5360",
  144. highlight: "#616774",
  145. label: "Dark Grey"
  146. }];
  147. window.onload = function() {
  148. var ctx1 = document.getElementById("chart-area1").getContext("2d");
  149. window.myPie = new Chart(ctx1).Pie(pieData);
  150. var ctx2 = document.getElementById("chart-area2").getContext("2d");
  151. window.myPie = new Chart(ctx2).Pie(pieData);
  152. };
  153. </script>
  154. </body>
  155. </html>