Implement hoveron: 'fills' for scattergl and scatterpolargl

During a discussion in the plotly.py forums in came up that the hoverlabel for the scatterpolar trace has a different behavior when the fill state is set to toself than when it's set to none.

CodePen: https://codepen.io/anon/pen/EpOGdX

fill: 'none' for scatterpolar

fill: 'toself' for scatterpolar

It also seems that the hoverinfo propery has no effect when fill is toself.

I did the same comparison with the scatterpolargl trace and it has the behavior that I expected:

fill: 'toself; for scatterpolargl

I don't know if this is a bug in scatterpolar or scatterpolargl, but I find the current scatterpolargl behavior (The behavior consistent with fill of none) to be more helpful.

This is the hoveron attribute, which defaults to fills in this case. This is consistent with scatter behavior, scatterpolargl seems to be the odd one out.

@alexcjohnson

@alexcjohnson is right scatterpolargl is the odd one out. I didn't know fills in scatterpolargl were a thing. That's what you get from reusing polar + scattergl logic I guess. But I doubt they function properly yet along have the correct hoverinfo.

@jonmmease

Looking at this more closely, the real problem is with scattergl.

As listed in the old gl2d limitations ticket, hoveron: 'fills' never got implemented for scattergl. As scatterpolargl reuses most of the scattergl hover logic, once we implement hoveron: 'fills' for scattergl, it should just work^TM for scatterpolargl.

So I guess this is another case of erroneously listed attributes. I'll make a PR 🔪 hoveron for scattergl and scatterpolargl.

@jonmmease Ok if I change the issue title to Implement hoveron: 'fills' for scattergl and scatterpolargl?

Sure!

🔪 hoveron declaration in scattergl and scatterpolargl

Hi. Will hoveron be implemented in scattergl?

@etpinard

@etpinard

Hi, was this issue neglected/forgotten about?
Thanks!

This item isn't on anyone's roadmap that I know of at the moment, but we'd welcome a pull request to address it!

If you could point me towards where to look, I might do it.

Here's hoveron: fills for scatter:

plotly.js/src/traces/scatter/hover.js

Lines 107 to 192 in 373d4ff

    
           if(hoveron.indexOf('fills') !== -1 && trace._polygons) { 
        
               var polygons = trace._polygons; 
        
               var polygonsIn = []; 
        
               var inside = false; 
        
               var xmin = Infinity; 
        
               var xmax = -Infinity; 
        
               var ymin = Infinity; 
        
               var ymax = -Infinity; 
        
               var i, j, polygon, pts, xCross, x0, x1, y0, y1; 
        
               for(i = 0; i < polygons.length; i++) { 
        
                   polygon = polygons[i]; 
        
                   // TODO: this is not going to work right for curved edges, it will 
        
                   // act as though they're straight. That's probably going to need 
        
                   // the elements themselves to capture the events. Worth it? 
        
                   if(polygon.contains(pt)) { 
        
                       inside = !inside; 
        
                       // TODO: need better than just the overall bounding box 
        
                       polygonsIn.push(polygon); 
        
                       ymin = Math.min(ymin, polygon.ymin); 
        
                       ymax = Math.max(ymax, polygon.ymax); 
        
                   } 
        
               } 
        
               if(inside) { 
        
                   // constrain ymin/max to the visible plot, so the label goes 
        
                   // at the middle of the piece you can see 
        
                   ymin = Math.max(ymin, 0); 
        
                   ymax = Math.min(ymax, ya._length); 
        
                   // find the overall left-most and right-most points of the 
        
                   // polygon(s) we're inside at their combined vertical midpoint. 
        
                   // This is where we will draw the hover label. 
        
                   // Note that this might not be the vertical midpoint of the 
        
                   // whole trace, if it's disjoint. 
        
                   var yAvg = (ymin + ymax) / 2; 
        
                   for(i = 0; i < polygonsIn.length; i++) { 
        
                       pts = polygonsIn[i].pts; 
        
                       for(j = 1; j < pts.length; j++) { 
        
                           y0 = pts[j - 1][1]; 
        
                           y1 = pts[j][1]; 
        
                           if((y0 > yAvg) !== (y1 >= yAvg)) { 
        
                               x0 = pts[j - 1][0]; 
        
                               x1 = pts[j][0]; 
        
                               if(y1 - y0) { 
        
                                   xCross = x0 + (x1 - x0) * (yAvg - y0) / (y1 - y0); 
        
                                   xmin = Math.min(xmin, xCross); 
        
                                   xmax = Math.max(xmax, xCross); 
        
                               } 
        
                           } 
        
                       } 
        
                   } 
        
                   // constrain xmin/max to the visible plot now too 
        
                   xmin = Math.max(xmin, 0); 
        
                   xmax = Math.min(xmax, xa._length); 
        
                   // get only fill or line color for the hover color 
        
                   var color = Color.defaultLine; 
        
                   if(Color.opacity(trace.fillcolor)) color = trace.fillcolor; 
        
                   else if(Color.opacity((trace.line || {}).color)) { 
        
                       color = trace.line.color; 
        
                   } 
        
                   Lib.extendFlat(pointData, { 
        
                       // never let a 2D override 1D type as closest point 
        
                       // also: no spikeDistance, it's not allowed for fills 
        
                       distance: pointData.maxHoverDistance, 
        
                       x0: xmin, 
        
                       x1: xmax, 
        
                       y0: yAvg, 
        
                       y1: yAvg, 
        
                       color: color, 
        
                       hovertemplate: false 
        
                   }); 
        
                   delete pointData.index; 
        
                   if(trace.text && !Array.isArray(trace.text)) { 
        
                       pointData.text = String(trace.text); 
        
                   } else pointData.text = trace.name; 
        
                   return [pointData]; 
        
               } 
        
           }

We'd need to implement similar logic in scattergl/hover - then since scatterpolargl/hover reuses scattergl/hover it might just work in scatterpolargl, or we might need a little more there.

+1 for implementing hoveron: 'fills' for scattergl!

Navigation Menu

Repository navigation

Implement `hoveron: 'fills'` for scattergl and scatterpolargl #2887

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if(hoveron.indexOf('fills') !== -1 && trace._polygons) {
	var polygons = trace._polygons;
	var polygonsIn = [];
	var inside = false;
	var xmin = Infinity;
	var xmax = -Infinity;
	var ymin = Infinity;
	var ymax = -Infinity;

	var i, j, polygon, pts, xCross, x0, x1, y0, y1;

	for(i = 0; i < polygons.length; i++) {
	polygon = polygons[i];
	// TODO: this is not going to work right for curved edges, it will
	// act as though they're straight. That's probably going to need
	// the elements themselves to capture the events. Worth it?
	if(polygon.contains(pt)) {
	inside = !inside;
	// TODO: need better than just the overall bounding box
	polygonsIn.push(polygon);
	ymin = Math.min(ymin, polygon.ymin);
	ymax = Math.max(ymax, polygon.ymax);
	}
	}

	if(inside) {
	// constrain ymin/max to the visible plot, so the label goes
	// at the middle of the piece you can see
	ymin = Math.max(ymin, 0);
	ymax = Math.min(ymax, ya._length);

	// find the overall left-most and right-most points of the
	// polygon(s) we're inside at their combined vertical midpoint.
	// This is where we will draw the hover label.
	// Note that this might not be the vertical midpoint of the
	// whole trace, if it's disjoint.
	var yAvg = (ymin + ymax) / 2;
	for(i = 0; i < polygonsIn.length; i++) {
	pts = polygonsIn[i].pts;
	for(j = 1; j < pts.length; j++) {
	y0 = pts[j - 1][1];
	y1 = pts[j][1];
	if((y0 > yAvg) !== (y1 >= yAvg)) {
	x0 = pts[j - 1][0];
	x1 = pts[j][0];
	if(y1 - y0) {
	xCross = x0 + (x1 - x0) * (yAvg - y0) / (y1 - y0);
	xmin = Math.min(xmin, xCross);
	xmax = Math.max(xmax, xCross);
	}
	}
	}
	}

	// constrain xmin/max to the visible plot now too
	xmin = Math.max(xmin, 0);
	xmax = Math.min(xmax, xa._length);

	// get only fill or line color for the hover color
	var color = Color.defaultLine;
	if(Color.opacity(trace.fillcolor)) color = trace.fillcolor;
	else if(Color.opacity((trace.line \|\| {}).color)) {
	color = trace.line.color;
	}

	Lib.extendFlat(pointData, {
	// never let a 2D override 1D type as closest point
	// also: no spikeDistance, it's not allowed for fills
	distance: pointData.maxHoverDistance,
	x0: xmin,
	x1: xmax,
	y0: yAvg,
	y1: yAvg,
	color: color,
	hovertemplate: false
	});

	delete pointData.index;

	if(trace.text && !Array.isArray(trace.text)) {
	pointData.text = String(trace.text);
	} else pointData.text = trace.name;

	return [pointData];
	}
	}

Implement hoveron: 'fills' for scattergl and scatterpolargl #2887

Description

Activity

alexcjohnson commented on Aug 9, 2018

etpinard commented on Aug 9, 2018

etpinard commented on Aug 9, 2018

jonmmease commented on Aug 9, 2018

mgsnuno commented on Mar 29, 2019

erezinman commented on Jan 18, 2021

nicolaskruchten commented on Jan 19, 2021

erezinman commented on Jan 19, 2021

alexcjohnson commented on Jan 19, 2021

danielsnider-aws commented on Jan 25, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Implement `hoveron: 'fills'` for scattergl and scatterpolargl #2887