Custom tooltip: add data points infos #3201

bydooweedoo · 2016-08-24T04:19:42Z

Hello everyone,

Just added more informations to the custom tooltip callback argument.

In order to know which data points are matching, I added a new property dataPoints to the tooltip object passed to the custom tooltip.

This property contains an array[CustomTooltipDataPoint] describes as following:

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.
pointY	Number	Y position of matching point.

I also added a test case covering this new property, and a description inside the documentation under the Advanced External Tooltips section.

Please let me know if anything,
Thanks

simonbrunel · 2016-09-04T09:55:41Z

Looks good :) I would also have updated the custom tooltips example to show how to use this new dataPoints property.

bydooweedoo · 2016-09-05T02:37:58Z

Hi @simonbrunel,

Instead of updating example, I added a new one under samples/dataPoints-customTooltips.html :)

Not sure about the naming though ^^'

etimberg · 2016-09-12T13:39:09Z

@bydooweedoo name is fine by me

simonbrunel · 2016-09-12T14:01:47Z

Good for me as well

rjmcguire · 2016-09-12T14:12:43Z

Err, the reason people put trailing commas into code is so to
avoid diff noise in your SCM.

:D you just added more, by removing a comma that was there to avoid diff
noise...

I'm sure there is a programmer joke hiding in this situation...

On Mon, Sep 12, 2016 at 4:01 PM, Simon Brunel [email protected]
wrote:

Good for me as well

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#3201 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABU8CXo5qoyhKaoFXgL4ZIo5_8v5bH2Uks5qpVtUgaJpZM4Jrny1
.

bydooweedoo · 2016-09-13T00:30:18Z

Hello @rjmcguire ,

I use trailing comma usually, but here it makes eslint just throw error on the build that's the reason why I removed them :/

Sorry about that

rjmcguire · 2016-09-16T08:33:42Z

Hi @bydooweedoo, I meant no offence or correction it just reminded me of an xkcd comic so I thought to share in the hopes it would humour you as much as it did me.

simonbrunel · 2016-09-16T08:35:18Z

@rjmcguire FYI, we just changed it :)

etimberg · 2016-09-16T19:15:07Z

docs/09-Advanced.md

@@ -159,6 +159,19 @@ var myPieChart = new Chart(ctx, {
 });
 ```

+In addition to all tooltip properties, a `dataPoints` property is added containing an `array[CustomTooltipDataPoint]`.
+
+#### CustomTooltipDataPoint


I think we already have a section on TooltipItems in the docs (since they are exposed to other callbacks). Can we link to that section instead of having it duplicated?

Sorry for the delay, I move this documentation from Advanced to proper Chart Configuration part.

…nfiguration section

simonbrunel · 2016-10-04T09:41:30Z

docs/01-Chart-Configuration.md

+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.


Just thinking, while the containing object isdataPoints, wouldn't x and y be better names?

dataPoints.forEach(function(point) { point.x; // compared to point.pointX point.y; // compared to point.pointY });

Would also be more consistent with index (and not pointIndex).

Yes I think you are right :)

It makes more sense. I will change this.

etimberg

Other than my 1 comment on the docs, this looks good

etimberg · 2016-10-06T12:53:56Z

docs/01-Chart-Configuration.md

@@ -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


I believe the section immediately below this describes the same thing. At a minimum we should add the new x and y properties to that code snippet as well. Maybe we should consider merging these sections as well.

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 and y, which code snippet are you talking about ?

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 the CustomTooltipDataPoint and TooltipItemInterface sections since they describe the same thing.

Also, for the tooltip item do we need the x and y properties? the user can look them up if necessary.

Alright, yes up to you we can merge the two interface together.

I didn't know TooltipItemInterface and the CustomTooltipDataPoint were referring to the same thing, that's why I separate the two in the first place.

In my opinion, x and y properties are usefull. I am using them in several of my projects to be able to show individual tooltips at each points position.

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

…nterface

Conflicts: src/core/core.tooltip.js

bydooweedoo · 2016-10-19T07:16:47Z

Hi @etimberg ,

I merged with current master. No more conflict.

Let me know if anything.

Expose tooltip items from tooltip model and added `x` and `y` properties to `TooltipItemInterface`

bydooweedoo added 3 commits July 27, 2016 07:48

Add dataPoints to tooltip model

306a56e

add testing for tooltip dataPoints

9ad1db9

add documentation for custom tooltip datapoints

683910b

simonbrunel mentioned this pull request Sep 4, 2016

Enhancement for Issue #2927 #2935

Closed

Add example using dataPoints from custom tooltip

e05be4c

bydooweedoo added 2 commits September 5, 2016 10:39

Custom tooltip dataPoints: Update example file title

53c4aaa

Remove trailing comma

f139186

etimberg reviewed Sep 16, 2016

View reviewed changes

Move TooltipDataPoint documentation from Advanced section to Chart Co…

9bcd85d

…nfiguration section

simonbrunel reviewed Oct 4, 2016

View reviewed changes

bydooweedoo added 2 commits October 5, 2016 07:55

Change tooltip datapoints pointX/pointY to x/y

fe10e75

Fix tooltip dataPoints example x/y attributes

f3539eb

etimberg reviewed Oct 6, 2016

View reviewed changes

bydooweedoo added 2 commits October 19, 2016 12:18

Merge tooltip data points interface documentation with tooltip item i…

7400d47

…nterface

Merge remote-tracking branch 'upstream/master'

8b53881

Conflicts: src/core/core.tooltip.js

etimberg approved these changes Oct 19, 2016

View reviewed changes

etimberg pushed a commit that referenced this pull request Oct 19, 2016

Custom tooltip: add data points infos (#3201)

3bd4d28

Expose tooltip items from tooltip model and added `x` and `y` properties to `TooltipItemInterface`

etimberg merged commit 3bd4d28 into chartjs:master Oct 19, 2016

etimberg mentioned this pull request Oct 23, 2016

Chart data corresponding to data point not included in Custom Tooltip callback #2927

Closed

simonbrunel modified the milestone: Version 2.4 Nov 4, 2016

exwm pushed a commit to exwm/Chart.js that referenced this pull request Apr 30, 2021

Custom tooltip: add data points infos (chartjs#3201)

0f30b5c

Expose tooltip items from tooltip model and added `x` and `y` properties to `TooltipItemInterface`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom tooltip: add data points infos #3201

Custom tooltip: add data points infos #3201

bydooweedoo commented Aug 24, 2016

simonbrunel commented Sep 4, 2016

bydooweedoo commented Sep 5, 2016

etimberg commented Sep 12, 2016

simonbrunel commented Sep 12, 2016

rjmcguire commented Sep 12, 2016

bydooweedoo commented Sep 13, 2016

rjmcguire commented Sep 16, 2016

simonbrunel commented Sep 16, 2016

etimberg Sep 16, 2016

bydooweedoo Oct 4, 2016

simonbrunel Oct 4, 2016

bydooweedoo Oct 4, 2016

etimberg left a comment

etimberg Oct 6, 2016

bydooweedoo Oct 19, 2016

etimberg Oct 19, 2016

bydooweedoo Oct 19, 2016 •

edited

Loading

etimberg Oct 19, 2016

bydooweedoo commented Oct 19, 2016

Custom tooltip: add data points infos #3201

Custom tooltip: add data points infos #3201

Conversation

bydooweedoo commented Aug 24, 2016

CustomTooltipDataPoint

simonbrunel commented Sep 4, 2016

bydooweedoo commented Sep 5, 2016

etimberg commented Sep 12, 2016

simonbrunel commented Sep 12, 2016

rjmcguire commented Sep 12, 2016

bydooweedoo commented Sep 13, 2016

rjmcguire commented Sep 16, 2016

simonbrunel commented Sep 16, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etimberg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bydooweedoo Oct 19, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bydooweedoo commented Oct 19, 2016

bydooweedoo Oct 19, 2016 •

edited

Loading