Question

0

57

Vistas

plotly js colorscale for errorbars

I want to plot the scattered data with a colorscale and the errorbars should have the same colorscale.

I found answers for plotly R (How do you make plotly error bars follow a colorscale?), but I can't translate it to js. Also using the name attribute for this seems strange to me.

Here is a minimal example (https://jsfiddle.net/ztqoemkd/1)

var trace1 = {
  type: 'scatter',
  mode: 'markers',
  y: [2, 1, 3],
  marker: {
    size: 20,
    color: [1, 2, 3],
    showscale: true
  },
  error_y: {
     type:'data',
     array: [0.5, 0.7, 0.5],
     color: [1, 2, 3]
  }
}

Plotly.newPlot('myDiv', [trace1])

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

5 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-10T15:23:36.272Z

I still don't know, if can be done self consistently with plotly itself.
At least, I could now develop this work around with d3:

// get colors from data points
rgbs = Plotly.d3.selectAll('.points .point').data().map(d => d.mcc)

// apply colors to errorbars
Plotly.d3.selectAll('.yerror').style('stroke', (d,i) => rgbs[i])

Here is the full demo:
https://jsfiddle.net/vor6e9wj
and the output is

Note 1: After zooming, the errorbars are again black.
Note 2: It does not work for scattergl.

Edit 1: To keep the colors while zooming, the work around can be attached to plotly_relayout (see https://jsfiddle.net/9s64y5cv).