<!doctype html> <html> <head> <title>Pie Chart with Custom Tooltips</title> <script src="../dist/Chart.bundle.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> #canvas-holder { width: 100%; margin-top: 50px; text-align: center; } #chartjs-tooltip { opacity: 1; position: absolute; background: rgba(0, 0, 0, .7); color: white; border-radius: 3px; -webkit-transition: all .1s ease; transition: all .1s ease; pointer-events: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .chartjs-tooltip-key { display: inline-block; width: 10px; height: 10px; } </style> </head> <body> <div id="canvas-holder" style="width: 50px;"> <canvas id="chart-area1" width="50" height="50" /> </div> <div id="canvas-holder" style="width: 300px;"> <canvas id="chart-area2" width="300" height="300" /> </div> <div id="chartjs-tooltip"></div> <script> Chart.defaults.global.tooltips.custom = function(tooltip) { // Tooltip Element var tooltipEl = $('#chartjs-tooltip'); if (!tooltipEl[0]) { $('body').append('<div id="chartjs-tooltip"></div>'); tooltipEl = $('#chartjs-tooltip'); } // Hide if no tooltip if (!tooltip.opacity) { tooltipEl.css({ opacity: 0 }); $('.chartjs-wrap canvas') .each(function(index, el) { $(el).css('cursor', 'default'); }); return; } $(this._chart.canvas).css('cursor', 'pointer'); // Set caret Position tooltipEl.removeClass('above below no-transform'); if (tooltip.yAlign) { tooltipEl.addClass(tooltip.yAlign); } else { tooltipEl.addClass('no-transform'); } // Set Text if (tooltip.body) { var innerHtml = [ (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 || []) .join('\n'), (tooltip.footer || []).join('\n'), (tooltip.afterFooter || []).join('\n') ]; tooltipEl.html(innerHtml.join('\n')); } // Find Y Location on page var top = 0; if (tooltip.yAlign) { if (tooltip.yAlign == 'above') { top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding; } else { top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding; } } var position = $(this._chart.canvas)[0].getBoundingClientRect(); // Display, position, and set styles for font tooltipEl.css({ opacity: 1, width: tooltip.width ? (tooltip.width + 'px') : 'auto', left: position.left + tooltip.x + 'px', top: position.top + top + 'px', fontFamily: tooltip._fontFamily, fontSize: tooltip.fontSize, fontStyle: tooltip._fontStyle, padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px', }); }; var config = { type: 'pie', data: { datasets: [{ data: [300, 50, 100, 40, 10], backgroundColor: [ "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360", ], }], labels: [ "Red", "Green", "Yellow", "Grey", "Dark Grey" ] }, options: { responsive: true, legend: { display: false }, tooltips: { enabled: false, } } }; window.onload = function() { var ctx1 = document.getElementById("chart-area1").getContext("2d"); window.myPie = new Chart(ctx1, config); var ctx2 = document.getElementById("chart-area2").getContext("2d"); window.myPie = new Chart(ctx2, config); }; </script> </body> </html>