- <!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) {
-
-
- var tooltipEl = $('#chartjs-tooltip');
-
- if (!tooltipEl[0]) {
- $('body').append('<div id="chartjs-tooltip"></div>');
- tooltipEl = $('#chartjs-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');
-
-
- tooltipEl.removeClass('above below no-transform');
- if (tooltip.yAlign) {
- tooltipEl.addClass(tooltip.yAlign);
- } else {
- tooltipEl.addClass('no-transform');
- }
-
-
- 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'));
- }
-
-
- 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();
-
-
- 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>
|