The order of the categorical axes in plotly.js

Question

I have a plot graph plotly.js which I am trying to get in the order of the correct axis. Each category has one bar, but sometimes they are green, and sometimes they are yellow. Lines should be in order from highest to lowest, but they seem to order them based on different fills.

Data:

var data = [ { "marker": { "color": "#006666" }, "x": ["A:0122", "A:0121", "A:0434", "A:0838", "A:0083", "A:0081", "A:0687"], "y": [1246.0, 1096.0, 1000.0, 200.0, 0.0, 0.0, 0.0], "name": "Green", "type": "bar" }, { "marker": { "color": "#C87B31" }, "x": ["A:0169", "A:0175"], "y": [270.0, 0.0], "name": "Yellow", "type": "bar" } ]; 

Layout:

 var layout = { "margin": { "t": 0 }, "barmode": "stack", "tickangle": -90, "showlegend": true, "xaxis": { "title": "Idea", "tickmode": "array", "tickvals": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"] }, "yaxis": { "title": "Result" } }; 

Another configuration:

 {"showLink":false, "displaylogo":false} 

But here is the result:

Please note that “A: 0169” should be the fourth bar, but instead it is the last.

How do I get the bars in the order shown in tickvals ? Or can I indicate their order differently?

Answer 1

You can set x and tickvals to an ordered array, and then add xaxis labels using ticktext ie data:

  [{ "marker": {"color": "#006666"}, "x": [0, 1, 2, 4, 5, 7, 8], "y": [1246.0, 1096.0, 1000.0, 200.0, 0.0, 0.0, 0.0], "name": "Green", "type": "bar" }, { "marker": {"color": "#C87B31"}, "x": [3, 6], "y": [270.0, 0.0], "name": "Yellow", "type": "bar" }], 

location:

  { "margin": {"t": 0}, "barmode": "stack", "tickangle": -90, "showlegend": true, "xaxis": { "title": "Idea", "tickmode": "array", "tickvals": [0, 1, 2, 3, 4, 5, 6, 7, 8], "ticktext": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"] }, "yaxis": { "title": "Result" }} 

alternatively, if you are only concerned about the color of the bars, you can build one trace and set the color as an array:

  var data = [{ "x": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"], "y": [1246.0, 1096.0, 1000.0, 270.0, 200.0, 0.0, 0.0, 0.0, 0.0], "type": "bar", "marker": {"color": ["#006666", "#006666", "#006666", "#C87B31", "#006666", "#006666", "#C87B31", "#006666"]} }], layout = { "margin": {"t": 0}, "xaxis": {"title": "Idea"}, "yaxis": {"title": "Result"} }; 

Answer 2

Since Plotly.js 1.10.2 , you can use categoryorder and categoryarray to control the order of the categorical axis. This way you can save x as a list of strings.

Using:

 var data = [ { "x": ["A", "D", "B"], "y": [1, 2, 3], "type": "bar" }, { "x": ["C", "E"], "y": [2, 3], "type": "bar" }]; var layout = { "xaxis": { "categoryorder": "array", "categoryarray": ["A", "B", "C", "D", "E"] } }; 

For your exact example:

 var data = [{ "marker": { "color": "#006666" }, "x": ["A:0122", "A:0121", "A:0434", "A:0838", "A:0083", "A:0081", "A:0687"], "y": [1246.0, 1096.0, 1000.0, 200.0, 0.0, 0.0, 0.0], "name": "Green", "type": "bar" }, { "marker": { "color": "#C87B31" }, "x": ["A:0169", "A:0175"], "y": [270.0, 0.0], "name": "Yellow", "type": "bar" }]; var layout = { "margin": { "t": 0 }, "barmode": "stack", "tickangle": -90, "showlegend": true, "xaxis": { "title": "Idea", "categoryorder": "array", "categoryarray": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"] }, "yaxis": { "title": "Result" } }; 

Result: