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);
+ 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.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);
+
+ .chartjs-tooltip-key {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
}
</style>
</head>
<body>
- <div id="canvas-holder">
+ <div id="canvas-holder" style="width: 50px;">
<canvas id="chart-area1" width="50" height="50" />
</div>
- <div id="canvas-holder">
+ <div id="canvas-holder" style="width: 300px;">
<canvas id="chart-area2" width="300" height="300" />
</div>
<script>
- Chart.defaults.global.customTooltips = function(tooltip) {
+ Chart.defaults.global.tooltips.custom = 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);
+ var tooltipEl = $('#chartjs-tooltip');
- // Set Text
- tooltipEl.html(tooltip.text);
+ if (!tooltipEl[0]) {
+ $('body').append('<div id="chartjs-tooltip"></div>');
+ tooltipEl = $('#chartjs-tooltip');
+ }
- // Find Y Location on page
- var top;
+ // 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;
+ top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
- top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
+ top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
-
- //Function to find absolution position of the element and not just it's relative position
- function getPosition (element) {
- var top = 0, left = 0;
- do {
- top += element.offsetTop || 0;
- left += element.offsetLeft || 0;
- element = element.offsetParent;
- } while (element);
-
- return {
- top: top,
- left: left
- };
- };
-
- //Finding absolute position of the chart canvas
- var position = getPosition(tooltip.chart.canvas)
-
- // Display, position, and set styles for font
- tooltipEl.css({
- opacity: 1,
- left: position.left + tooltip.x + 'px',
- top: position.top + top + 'px',
- fontFamily: tooltip.fontFamily,
- fontSize: tooltip.fontSize,
- fontStyle: tooltip.fontStyle,
- });
+ }
+
+ 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 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"
- }];
+ 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).Pie(pieData);
+ window.myPie = new Chart(ctx1, config);
var ctx2 = document.getElementById("chart-area2").getContext("2d");
- window.myPie = new Chart(ctx2).Pie(pieData);
+ window.myPie = new Chart(ctx2, config);
};
</script>
</body>
projects / thirdparty / Chart.js.git / commitdiff
