CODEWITHSUNDEEP
javascriptreactjsplotlybar-chart
Only X
Only X

Reputation: 37

React plotly bar chart: color bars dependend on x value

I got the following code:

 x: [1, 2, 3,4],
 y: ['Who?', 'Where?', 'When?','What?'],
 name: 'Subject',
 orientation: 'h',
 marker: {
   color: 'rgba(55,128,191,0.6)',
   width: 1
 },
 type: 'bar'
};

var data = [trace1];
var layout = {
 title: 'Colored Bar Chart',
 barmode: 'stack'
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud:true});

The label 'Who?' should be red, 'Where?' should be orange, 'When?'should be yellow and 'What?' should be green. How do I archive this? I already looked at colorscale but couldnt make it work.

Upvotes: 0

Views: 1584

Answers (1)

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

https://plot.ly/javascript/reference/#bar-marker-color

Sets themarkercolor. It accepts either a specific color or an array of numbers that are mapped to the colorscale relative to the max and min values of the array or relative to marker.cmin and marker.cmax if set.

Like this:

marker: {
  color: ['#ff0000', '#ff2200', 'rgba(55,128,191,0.6)', '#00ff00'],
  width: 1
},

First color in array corresponds to first bar, 2nd to 2nd, etc

Upvotes: 2

Related Questions