| <!doctype html> |
| <html> |
| |
| <head> |
| <title>Pie Chart with Custom Tooltips</title> |
| <script src="../Chart.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; |
| padding: 3px; |
| 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.below { |
| -webkit-transform: translate(-50%, 0); |
| transform: translate(-50%, 0); |
| } |
| #chartjs-tooltip.below:before { |
| border: solid; |
| border-color: #111 transparent; |
| border-color: rgba(0, 0, 0, .8) transparent; |
| border-width: 0 8px 8px 8px; |
| bottom: 1em; |
| content: ""; |
| display: block; |
| left: 50%; |
| position: absolute; |
| z-index: 99; |
| -webkit-transform: translate(-50%, -100%); |
| transform: translate(-50%, -100%); |
| } |
| #chartjs-tooltip.above { |
| -webkit-transform: translate(-50%, -100%); |
| transform: translate(-50%, -100%); |
| } |
| #chartjs-tooltip.above:before { |
| border: solid; |
| border-color: #111 transparent; |
| border-color: rgba(0, 0, 0, .8) transparent; |
| border-width: 8px 8px 0 8px; |
| bottom: 1em; |
| content: ""; |
| display: block; |
| left: 50%; |
| top: 100%; |
| position: absolute; |
| z-index: 99; |
| -webkit-transform: translate(-50%, 0); |
| transform: translate(-50%, 0); |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div id="canvas-holder"> |
| <canvas id="chart-area1" width="50" height="50" /> |
| </div> |
| <div id="canvas-holder"> |
| <canvas id="chart-area2" width="300" height="300" /> |
| </div> |
| |
| <div id="chartjs-tooltip"></div> |
| |
| |
| <script> |
| Chart.defaults.global.customTooltips = function(tooltip) { |
| |
| // Tooltip Element |
| var tooltipEl = $('#chartjs-tooltip'); |
| |
| // Hide if no tooltip |
| if (!tooltip) { |
| tooltipEl.css({ |
| opacity: 0 |
| }); |
| return; |
| } |
| |
| // Set caret Position |
| tooltipEl.removeClass('above below'); |
| tooltipEl.addClass(tooltip.yAlign); |
| |
| // Set Text |
| tooltipEl.html(tooltip.text); |
| |
| // Find Y Location on page |
| var top; |
| if (tooltip.yAlign == 'above') { |
| top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding; |
| } else { |
| top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding; |
| } |
| |
| // Display, position, and set styles for font |
| tooltipEl.css({ |
| opacity: 1, |
| left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', |
| top: tooltip.chart.canvas.offsetTop + top + 'px', |
| fontFamily: tooltip.fontFamily, |
| fontSize: tooltip.fontSize, |
| fontStyle: tooltip.fontStyle, |
| }); |
| }; |
| |
| var pieData = [{ |
| value: 300, |
| color: "#F7464A", |
| highlight: "#FF5A5E", |
| label: "Red" |
| }, { |
| value: 50, |
| color: "#46BFBD", |
| highlight: "#5AD3D1", |
| label: "Green" |
| }, { |
| value: 100, |
| color: "#FDB45C", |
| highlight: "#FFC870", |
| label: "Yellow" |
| }, { |
| value: 40, |
| color: "#949FB1", |
| highlight: "#A8B3C5", |
| label: "Grey" |
| }, { |
| value: 120, |
| color: "#4D5360", |
| highlight: "#616774", |
| label: "Dark Grey" |
| }]; |
| |
| window.onload = function() { |
| var ctx1 = document.getElementById("chart-area1").getContext("2d"); |
| window.myPie = new Chart(ctx1).Pie(pieData); |
| |
| var ctx2 = document.getElementById("chart-area2").getContext("2d"); |
| window.myPie = new Chart(ctx2).Pie(pieData); |
| }; |
| </script> |
| </body> |
| |
| </html> |