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

<body>
  <div id="myDiv"></div>
</body>
let trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  error_y: {
    array: [1, 1, 1, 1],
  },
  marker: {
    size: 10,
    color: [0, 10, 15, 20],
    colorscale: [
      [0.0, "#FF0000"],
      [0.33, "#444444"],
      [0.66, "#AAAAAA"],
      [1.0, "#FFFF00"],
    ],
  },
  mode: 'lines+markers'
}
let data = [ trace1 ]
let config = { responsive: true }
let layer = document.getElementById("myDiv")

Plotly.newPlot(layer, data, {}, config).then( _ => {
  Plotly.relayout(layer, {}) 
})

layer.on("plotly_relayout", e => {
  let ebars = document.querySelectorAll(".errorbars path")
  
  ebars.forEach((eb, i) => {
    eb.style.stroke = trace1.marker.colorscale[i][1]
    eb.style.strokeDasharray = "1px 3px"
  })
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.