-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom tooltip: add data points infos #3201
Changes from 7 commits
306a56e
9ad1db9
683910b
e05be4c
53c4aaa
f139186
9bcd85d
fe10e75
f3539eb
7400d47
8b53881
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -257,6 +257,18 @@ afterBody | `Array[tooltipItem], data` | Text to render after the body section | |
beforeFooter | `Array[tooltipItem], data` | Text to render before the footer section | ||
footer | `Array[tooltipItem], data` | Text to render as the footer | ||
afterFooter | `Array[tooltipItem], data` | Text to render after the footer section | ||
dataPoints | `Array[CustomTooltipDataPoint], data` | List of matching point informations. | ||
|
||
#### CustomTooltipDataPoint | ||
|
||
Name | Type | Description | ||
--- | --- | --- | ||
index | Number | Matching point index. | ||
datasetIndex | Number | Matching dataset index. | ||
xLabel | String | Matching label on X axis. | ||
yLabel | String | Matching label on Y axis. | ||
pointX | Number | X position of matching point. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just thinking, while the containing object is dataPoints.forEach(function(point) {
point.x; // compared to point.pointX
point.y; // compared to point.pointY
}); Would also be more consistent with There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes I think you are right :) It makes more sense. I will change this. |
||
pointY | Number | Y position of matching point. | ||
|
||
#### Tooltip Item Interface | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
<!doctype html> | ||
<html> | ||
|
||
<head> | ||
<title>Custom Tooltips using Data Points</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; | ||
-webkit-user-select: none; | ||
-ms-user-select: none; | ||
} | ||
.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); | ||
padding: 4px; | ||
} | ||
|
||
.chartjs-tooltip-key { | ||
display: inline-block; | ||
width: 10px; | ||
height: 10px; | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<div id="canvas-holder1" style="width:75%;"> | ||
<canvas id="chart1"></canvas> | ||
</div> | ||
<div class="chartjs-tooltip" id="tooltip-0"></div> | ||
<div class="chartjs-tooltip" id="tooltip-1"></div> | ||
<script> | ||
var customTooltips = function (tooltip) { | ||
$(this._chart.canvas).css("cursor", "pointer"); | ||
|
||
$(".chartjs-tooltip").css({ | ||
opacity: 0, | ||
}); | ||
|
||
if (!tooltip || !tooltip.opacity) { | ||
return; | ||
} | ||
|
||
if (tooltip.dataPoints.length > 0) { | ||
tooltip.dataPoints.forEach(function (dataPoint) { | ||
var content = [dataPoint.xLabel, dataPoint.yLabel].join(": "); | ||
var $tooltip = $("#tooltip-" + dataPoint.datasetIndex); | ||
|
||
$tooltip.html(content); | ||
$tooltip.css({ | ||
opacity: 1, | ||
top: dataPoint.pointY + "px", | ||
left: dataPoint.pointX + "px", | ||
}); | ||
}); | ||
} | ||
}; | ||
var randomScalingFactor = function() { | ||
return Math.round(Math.random() * 100); | ||
}; | ||
var lineChartData = { | ||
labels: ["January", "February", "March", "April", "May", "June", "July"], | ||
datasets: [{ | ||
pointHitRadius: 100, | ||
label: "My First dataset", | ||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] | ||
}, { | ||
pointHitRadius: 100, | ||
label: "My Second dataset", | ||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] | ||
}] | ||
}; | ||
|
||
window.onload = function() { | ||
var chartEl = document.getElementById("chart1"); | ||
var chart = new Chart(chartEl, { | ||
type: "line", | ||
data: lineChartData, | ||
options: { | ||
title:{ | ||
display: true, | ||
text: "Chart.js - Custom Tooltips using Data Points" | ||
}, | ||
tooltips: { | ||
enabled: false, | ||
custom: customTooltips | ||
} | ||
} | ||
}); | ||
}; | ||
</script> | ||
</body> | ||
|
||
</html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe the section immediately below this describes the same thing. At a minimum we should add the new
x
andy
properties to that code snippet as well. Maybe we should consider merging these sections as well.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hello @etimberg ,
I am not sure what you want me to do here. Could you explain more ?
Which sections do you want to merge ? If you are talking about
CustomTooltipDataPoint
and the one just before,dataPoints
is an array so it should be defined as an external section right ?Also for
x
andy
, which code snippet are you talking about ?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I meant the snippet here https://github.com/chartjs/Chart.js/blob/master/docs/01-Chart-Configuration.md#tooltip-item-interface
I was also thinking to merge with the same section to that 2nd column of the last line of the table becomes
Array[TooltipItemInterface]
. In other words, merging theCustomTooltipDataPoint
andTooltipItemInterface
sections since they describe the same thing.Also, for the tooltip item do we need the
x
andy
properties? the user can look them up if necessary.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alright, yes up to you we can merge the two interface together.
I didn't know
TooltipItemInterface
and theCustomTooltipDataPoint
were referring to the same thing, that's why I separate the two in the first place.In my opinion,
x
andy
properties are usefull. I am using them in several of my projects to be able to show individual tooltips at each points position.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, ok. That's my bad, I should have been clearer. If you can merge the doc sections and fix the merge conflict I'll merge this