Black Lives Matter. Please consider donating to Black Girls Code today.

Is it possible to show hide the trace in Scatter?

I am having a scatter graph, which is having five legends. But I need to display only 2 remaining 3 will be disabled. It will be shown only if the user clicks on it. Is it possible?

Thank you in advance.

use visible: 'legendonly'

1 Like

Thank you so much @etienne, Sorry for missing that part on the doc. :frowning:

HI I am using a scatter group, If Is it possibel to hide a scatter/trace group?

You might want to look at:

Thank you for your reply, Following is my code, now I am able to hide the group having the same name. (This works for me because the other traces are hidden trace which I have it to show uncertainty over the line as area chart) The original problem was, if i set legend only for one of the element in the group, it does not change the group. Where as, if I click one legend (show/hide) it applies to the whole group. I am not sure its a bug.

updateTrace: function(phase){
			var plotDiv = document.getElementById(container);
			var plotData = plotDiv.data;
			$.each(plotData, function(key, value){
				var visibilty = true;
				if (!new RegExp(phase.join("|")).test(value.name)) {
				    visibilty = 'legendonly';
				}
				plotDiv.data[key].visible = visibilty;
			})
			Plotly.redraw(plotDiv);
			// Plotly.restyle(container, update);
		},

That’s the intended behaviour. Here’s how the legend implement group toggling: https://github.com/plotly/plotly.js/blob/a66dc667e85e90f7ffb0fd933651910ac4656237/src/components/legend/index.js#L507-L519

Thank you @etienne , I agree when we click on the legend it works correctly. I was saying if I change visibility of one element in a group via JS, it does not affect other element in the group. Thanks for all your help…:slight_smile: