How does marker coloring works in Plotly.js?

Question

I'm trying to create a grouped bar chart using latest Plotly js (v1.52.3). Problem is my traces are dynamic so I can't define a constant colorscale for my bars.

Though I can change the color using marker.color property, I don't understand the behavior of Plotly as for coloring my bars. I used a naive approach defining a increment variable, but I really don't get how this variable is used by Plotly to set the colors.

For example, values below 100 do not seem to affect the default coloring scheme. It also has to be a string. I didn't find useful information in the documentation.

const volumes = JSON.parse(document.getElementById('volume').textContent)

var data = []
var i = 100 // Arbitrary value
for(var year in volumes) {
  trace = {
    x: Object.keys(volumes[year]),
    y: Object.values(volumes[year]),
    xaxis: 'x1',
    yaxis: 'y1',
    type: 'bar',
    name: year,
    marker: {
      color: i.toString(),
    },
  }
  data.push(trace)
  i += 13 // Arbitrary value
}

var layout = {
  barmode: 'group',
}

Plotly.newPlot('volume-chart', data, layout)

This code gives me this kind of ouput :

Can someone explain how the value passed to marker.color affects the coloring ?

Additional but related question : how could I rely on a colorscale for this kind of purpose ? I'd like to have sort of a gradient yet complementary colors (similar to the one on the screenshot)

mit mit · Accepted Answer · 2020-03-16T22:06:06

marker.color accepts a color or an array of colors preferably in one of the following formats:

'blue' - a css color name
'#0000FF' - a hex code
'rgb(0,0,255)' - an RGB decimal code (optionally with alpha value)

According to the docs, it also accepts

an array of numbers that are mapped to the colorscale relative to the max and min values of the array

but I don't know anything about that, sorry.

How does marker coloring works in Plotly.js?

1 Answers