Please help, stacked bar graph per day cannot customize marker colors!


#1

Im trying to have a certain color for a stacked bar graph.
I render each 30 days a stacked bar but the marker, color options do not work.
Im unable to find any solution to set the color somehow.
Please help.

This works:

  var trace1 = {
    x: ['Feature A', 'Feature B', 'Feature C', 'Feature D', 'Feature E'],
    y: [20, 14, 23, 25, 22],
    marker:{
      color: ['rgba(204,204,204,1)', 'rgba(222,45,38,0.8)', 'rgba(204,204,204,1)', 'rgba(204,204,204,1)', 'rgba(204,204,204,1)']
    },
    type: 'bar'
  };

  var data = [trace1];

  var layout = {
    title: 'Least Used Feature'
  };

  Plotly.newPlot('graph_request', data, layout);

But this is only for totals, I render my charts with 30 day values like so:

  var graph_width = ($('#wrapper_chart_requests').width());

  var free = {
    type: 'bar',
    width: 1,
    y: gon.array_free
  }

  var vog = {
    type: 'bar',
    width: 1,
    y: gon.array_something
  }

  var invoice = {
    type: 'bar',
    width: 1,
    y: gon.array_invoice
  }

  var pes = {
    type: 'bar',
    width: 1,
    y: gon.array_something2
  }

  var kyc = {
    type: 'bar',
    width: 1,
    y: gon.array_something3
  }

  var layout  = {
    barmode: 'stack',
    showlegend: false,
    hovermode: false,
    autosize: false,
    zoom: false,
    width: graph_width,
    height: 400,
    margin: {
      l: 0,
      r: 0,
      b: 0,
      t: 0,
      pad: 0
    },
    yaxis: {  fixedrange: true },
    xaxis : { fixedrange: true },
    paper_bgcolor: '',
    plot_bgcolor: ''
  };
  var data    = [free, vog, invoice, pes, kyc]
  Plotly.newPlot('graph_request', data, layout, {displayModeBar: false});

Then the arrays have this format like below ( just a single value for each day):

[
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]

How can I set a fixed color for each bar? like green, red, orange
Currently the colors are randomly assigned and I cannot modiy them very frustrating


#2

Making sure that your marker.color array has the same length as your y coordinate array should do the trick.