Fixes Too Many Datapoints being hovered #5332
Conversation
src/core/core.interaction.js
Outdated
| if (element.inXRange(position.x)) { | ||
| items.push(element); | ||
| } | ||
| } else if (element.datasetlength >= 40) { |
There was a problem hiding this comment.
you could turn this else if into simply an else
however, i'm not sure why the check for whether there are more or less than 40 elements is being added. Why not always to do the cleanup of extra elements?
There was a problem hiding this comment.
You're right the else if check is kind of redundant. After some extensive testing, I found the issue occurs after there are 40 datapoints on the chart. From my understanding, the reason for inXRange is to allow the user to not have to be precisely on the 'x' coordinate to have the datapoint highlighted by the tooltip and rather have the user be in a certain range of the tooltip making it easier to highlight. However, the main problem here is when we have say 300+ datapoints there begins to be too many data points that fall within that same range. Overall the having a separate function inXRangeSmall narrows the range in which a datapoint will be returned if we have an extensive amount of datapoints (40+). Also I can add the cleanup to both just in case. Thanks for the review!
There was a problem hiding this comment.
When I convert the else if to else I get the "no-lonely-if" lint error.
There was a problem hiding this comment.
It wants you to combine the else with the next if: } else iif (element.inXRangeSmall(position.x)) {
I still am not understanding though why we do not always call inXRangeSmall and remove the check for whether there are 40 datapoints
|
@benmccann I implemented your suggestion (remove the check for 40 datapoints) and transferred the functionality of |
| @@ -37,6 +37,7 @@ function parseVisibleItems(chart, handler) { | |||
| for (j = 0, jlen = meta.data.length; j < jlen; ++j) { | |||
| var element = meta.data[j]; | |||
| if (!element._view.skip) { | |||
| element.datasetlength = meta.data.length; | |||
| @@ -24,7 +24,7 @@ defaults._set('global', { | |||
|
|
|||
| function xRange(mouseX) { | |||
| var vm = this._view; | |||
| return vm ? (Math.abs(mouseX - vm.x) < vm.radius + vm.hitRadius) : false; | |||
| return vm ? (Math.abs(mouseX - vm.x) < 2) : false; | |||
There was a problem hiding this comment.
After testing I found 2 to be a reasonable number to have a decent X range without returning too many tooltip items. I found the lower the number the more precise the user has to be to the X coordinate of the datapoint for it to be highlighted which can get tedious if you have say 10 data points and are trying to have one highlighted.
|
Closing in favor of #5578 |
Fixes #5231
While investigating
core.interaction.jsI noticed the culprit of this problem isxRange(mouseX). The reasoning behind this is when there are an excessive amount of data points more than one falls into the range ofxcausing there to be multiple datapoints hovered because they are so close together. Of course, when there are fewer data points (around 40 or less) this doesn't occur.To fix this I made a separate function called
xRangeSmallthat narrows down the range of which a data point will be retrieved. In my testing, it only occurred when there was more than 40 data points on the graph so I added anelse iftox: function(chart, e, options)that accounts for this problem when there are more than 40 data points. Feedback is welcome!Result
JSFiddle