Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

161
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>

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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).

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda