Update a Plotly chart in Pluto in response to a click?

Specific Domains Visualization
,
2

Hi @Kirby_Zhang,

The problem is not in the use PLOT within the listener but in the signature you are using for the Plotly.restyle function itself, which is often confusing also for me.

If you check the documentation of the function, you see that the signature expects only one argument after the update object. The last argument is an array of indices within the traces of the plot. You can’t change (as far as I am aware) just the color of a single point by providing the point number to Plotly.restyle.

Using the correct signature, you can rewrite your listener code as

	(e) => {
		console.log(e)
	    let dt = e.points[0]
		PLOT.value = [dt.x, dt.y]
		PLOT.dispatchEvent(new CustomEvent('input'))
	    var update = {
			'marker.color': 'red',
		}
	    Plotly.restyle(PLOT, update, [dt.curveNumber])
	}

But that will change the marker color for the whole curve (and also the line color since you didn’t specifically provide a line color in the scatter call).

If you want to change just the color of a single point, you have to change the marker.color to be an array of colors rather than a single one.
That requires some slightly more complex processing on the JS side, like in this example

(e) => {
		console.log(e)
	    let dt = e.points[0]
	// Create the array of marker colors, with blue on each point except the selected one
		const colors = Array.from(dt.data.y).map(
	(value, index) => {
		return index == dt.pointNumber ? 'red' : 'blue'
	})
		PLOT.value = [dt.x, dt.y]
		PLOT.dispatchEvent(new CustomEvent('input'))
	    var update = {
			'marker.color': [colors],
		}
	    Plotly.restyle(PLOT, update, [dt.curveNumber])
	}
1 Like