Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-25 01:26:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add new properties for the caretX,caretY point of a tooltip. Useful for custom tooltips.

Browse Source 
The custom tooltip sample was updated as well to use the new properties.
This commit is contained in:
etimberg
2016-10-15 17:04:22 -04:00
committed by Evert Timberg
parent a0ce74643f
commit a0388eff4c
3 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/09-Advanced.md
View File

@@ -173,6 +173,8 @@ var myPieChart = new Chart(ctx, {
// tooltip.text
// tooltip.x
// tooltip.y
// tooltip.caretX
// tooltip.caretY
// etc...
}
}

79
samples/line-customTooltips.html
View File

@@ -4,7 +4,6 @@
<head>
<title>Line 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{
-moz-user-select: none;
@@ -34,76 +33,82 @@
<body>
<div id="canvas-holder1" style="width:75%;">
<canvas id="chart1"/>
<canvas id="chart"/>
</div>
<script>
window.count = 0;
Chart.defaults.global.pointHitDetectionRadius = 1;
var customTooltips = function(tooltip) {
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');
var tooltipEl = document.getElementById('chartjs-tooltip');
if (!tooltipEl[0]) {
$('body').append('<div id="chartjs-tooltip"></div>');
tooltipEl = $('#chartjs-tooltip');
if (!tooltipEl) {
var div = document.createElement('div');
div.id = 'chartjs-tooltip';
document.body.appendChild(div);
tooltipEl = document.getElementById('chartjs-tooltip');
}
// Hide if no tooltip
if (!tooltip.opacity) {
tooltipEl.css({
opacity: 0
});
$('.chartjs-wrap canvas')
.each(function(index, el) {
$(el).css('cursor', 'default');
});
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
document.querySelector('.chartjs-wrap').style.cursor = 'default';
return;
}
$(this._chart.canvas).css('cursor', 'pointer');
this._chart.canvas.style.cursor = 'pointer';
// Set caret Position
tooltipEl.removeClass('above below no-transform');
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltip.yAlign) {
tooltipEl.addClass(tooltip.yAlign);
tooltipEl.classList.add(tooltip.yAlign);
} else {
tooltipEl.addClass('no-transform');
tooltipEl.classList.add('no-transform');
}
function joinBody(bodyItem) {
return [].concat(bodyItem.before, bodyItem.lines, bodyItem.after).join('\n')
}
// 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')
(tooltip.beforeTitle || []).join('\n'),
(tooltip.title || []).join('\n'),
(tooltip.afterTitle || []).join('\n'),
(tooltip.beforeBody || []).join('\n'),
(tooltip.body || []).map(joinBody).join('\n'),
(tooltip.afterBody || []).join('\n'),
(tooltip.beforeFooter || []).join('\n'),
(tooltip.footer || []).join('\n'),
(tooltip.afterFooter || []).join('\n')
];
tooltipEl.html(innerHtml.join('\n'));
tooltipEl.innerHTML = 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.caretY - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
top = tooltip.caretY + tooltip.caretHeight + tooltip.caretPadding;
}
}
var position = $(this._chart.canvas)[0].getBoundingClientRect();
var position = this._chart.canvas.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',
});
tooltipEl.style.opacity = 1;
tooltipEl.style.width = tooltip.width ? (tooltip.width + 'px') : 'auto';
tooltipEl.style.left = position.left + tooltip.caretX + 'px';
tooltipEl.style.top = position.top + top + 'px';
tooltipEl.style.fontFamily = tooltip._fontFamily;
tooltipEl.style.fontSize = tooltip.fontSize;
tooltipEl.style.fontStyle = tooltip._fontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
@@ -119,7 +124,7 @@
};
window.onload = function() {
var chartEl = document.getElementById("chart1");
var chartEl = document.getElementById("chart");
window.myLine = new Chart(chartEl, {
type: 'line',
data: lineChartData,

12
src/core/core.tooltip.js
View File

@@ -465,14 +465,18 @@ module.exports = function(Chart) {
width: existingModel.width,
height: existingModel.height
};
var tooltipPosition = {
x: existingModel.caretX,
y: existingModel.caretY
};
var i, len;
if (active.length) {
model.opacity = 1;
var labelColors = [],
tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);
var labelColors = [];
tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);
var tooltipItems = [];
for (i = 0, len = active.length; i < len; ++i) {
@@ -520,6 +524,10 @@ module.exports = function(Chart) {
model.width = tooltipSize.width;
model.height = tooltipSize.height;
// Point where the caret on the tooltip points to
model.caretX = tooltipPosition.x;
model.caretY = tooltipPosition.y;
me._model = model;
if (changed && opts.custom) {