{"action":"created","issue":{"url":"https://api.github.com/repos/plotly/plotly.js/issues/1973","repository_url":"https://api.github.com/repos/plotly/plotly.js","labels_url":"https://api.github.com/repos/plotly/plotly.js/issues/1973/labels{/name}","comments_url":"https://api.github.com/repos/plotly/plotly.js/issues/1973/comments","events_url":"https://api.github.com/repos/plotly/plotly.js/issues/1973/events","html_url":"https://github.com/plotly/plotly.js/issues/1973","id":253691279,"number":1973,"title":"“Bar chart – Overlay Mode” unexpected behavior. ","user":{"login":"flyingBurman","id":7884934,"avatar_url":"https://avatars3.githubusercontent.com/u/7884934?v=4","gravatar_id":"","url":"https://api.github.com/users/flyingBurman","html_url":"https://github.com/flyingBurman","followers_url":"https://api.github.com/users/flyingBurman/followers","following_url":"https://api.github.com/users/flyingBurman/following{/other_user}","gists_url":"https://api.github.com/users/flyingBurman/gists{/gist_id}","starred_url":"https://api.github.com/users/flyingBurman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/flyingBurman/subscriptions","organizations_url":"https://api.github.com/users/flyingBurman/orgs","repos_url":"https://api.github.com/users/flyingBurman/repos","events_url":"https://api.github.com/users/flyingBurman/events{/privacy}","received_events_url":"https://api.github.com/users/flyingBurman/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-08-29T14:48:22Z","updated_at":"2017-08-31T12:51:42Z","closed_at":null,"author_association":"NONE","body":"This post is related to https://github.com/plotly/plotly.js/issues/475\r\n\r\nPositive and negative values can be stacked on each side of the zero line.\r\nThe problem can be replicated using codepen https://codepen.io/etpinard/pen/mPGLrY with the following code. \r\n        `console.log(Plotly.version)\r\n\r\n        var trace1 = {\r\n          x: ['giraffes', 'orangutans', 'monkeys','dogs'],\r\n          y: [1, 3, -5,-2],\r\n          name: 'SF Zoo',\r\n          type: 'bar'\r\n        };\r\n        var trace2 = {\r\n          x: ['giraffes', 'orangutans', 'monkeys','dogs'],\r\n          y: [2, 2, 4,4],\r\n          name: 'LA Zoo',\r\n          type: 'bar'\r\n        };\r\n        var trace3 = {\r\n          x: ['giraffes', 'orangutans', 'monkeys','dogs'],\r\n          y: [3,1, -2,-5],\r\n          name: 'LA Zoo',\r\n          type: 'bar'\r\n        };\r\n        var data = [trace1, trace2,trace3];\r\n        var layout = { \r\n          title: 'click on modebar buttons to change \\'barmode\\''\r\n        };\r\n\r\n        var config = {\r\n          modeBarButtons: [[{\r\n            name: 'stack',\r\n            click: function(gd) {\r\n              Plotly.relayout(gd, 'barmode', 'stack');\r\n            }\r\n          }, {\r\n            name: 'overlay',\r\n            click: function(gd) {\r\n              Plotly.relayout(gd, 'barmode', 'overlay');\r\n            }\r\n          }, {\r\n            name: 'group',\r\n            click: function(gd) {\r\n              Plotly.relayout(gd, 'barmode', 'group');\r\n            }, \r\n          }, {\r\n            name: 'relative',\r\n            click: function(gd) {\r\n              Plotly.relayout(gd, 'barmode', 'relative');\r\n            }, \r\n          }].reverse()]\r\n        }\r\n\r\n        Plotly.newPlot('graph', data, layout, config);`\r\n\r\nThe output will be like this. ( You might need to click on the image to see it better. )\r\n![over_lay_mode](https://user-images.githubusercontent.com/7884934/29827238-64d7aa06-8ca7-11e7-92a3-236c029c5154.PNG)\r\n\r\n\r\n\r\n“Giraffes” and “orangutans” have the very similar data (1,2,3) and (3,2,1). But, the output is different depending on the order of the input. In Giraffes,  trace1 and trace 2 data are never shown up and overfilled. This shouldn’t be the desired output. \r\nWhat  I think it should happen is that for positive values, the bars are plotted in descending order, from largest to smallest. For negative values, the bars need to be plotted in ascending order, from smallest to largest. \r\nPlease let me know if there is an easy way to fix this. \r\n"},"comment":{"url":"https://api.github.com/repos/plotly/plotly.js/issues/comments/326285754","html_url":"https://github.com/plotly/plotly.js/issues/1973#issuecomment-326285754","issue_url":"https://api.github.com/repos/plotly/plotly.js/issues/1973","id":326285754,"user":{"login":"flyingBurman","id":7884934,"avatar_url":"https://avatars3.githubusercontent.com/u/7884934?v=4","gravatar_id":"","url":"https://api.github.com/users/flyingBurman","html_url":"https://github.com/flyingBurman","followers_url":"https://api.github.com/users/flyingBurman/followers","following_url":"https://api.github.com/users/flyingBurman/following{/other_user}","gists_url":"https://api.github.com/users/flyingBurman/gists{/gist_id}","starred_url":"https://api.github.com/users/flyingBurman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/flyingBurman/subscriptions","organizations_url":"https://api.github.com/users/flyingBurman/orgs","repos_url":"https://api.github.com/users/flyingBurman/repos","events_url":"https://api.github.com/users/flyingBurman/events{/privacy}","received_events_url":"https://api.github.com/users/flyingBurman/received_events","type":"User","site_admin":false},"created_at":"2017-08-31T12:51:42Z","updated_at":"2017-08-31T12:51:42Z","author_association":"NONE","body":"I have sort of workaround for my application.  Let's say the data we are interested in is \r\n1 2 3 \r\n4 5 6 \r\n7 8 9\r\n\r\nI want to plot from first row to second row and second row to third row. The following Python code would achieve that. \r\n\r\n        iplot(\r\n        {'data': [{'base': array([ 1,2,3]),\r\n           'marker': {'color': 'rgba(0, 97, 37, 1.0)',\r\n            'line': {'color': 'rgba(0, 97, 37, 1.0)', 'width': 1}},\r\n           'name': 'first',\r\n           'orientation': 'v',\r\n           'text': '',\r\n           'type': 'bar',\r\n           'x': array(['dog', 'cat', 'monkey'], dtype=object),\r\n           'y': array([ 3,3,3,])},\r\n          {'base': array([4,5,6]),\r\n           'marker': {'color': 'rgba(138, 33, 14, 1.0)',\r\n            'line': {'color': 'rgba(138, 33, 14, 1.0)', 'width': 1}},\r\n           'name': 'second',\r\n           'orientation': 'v',\r\n           'text': '',\r\n           'type': 'bar',\r\n           'x': array(['dog', 'cat', 'monkey'], dtype=object),\r\n           'y': array([ 3,3,3])}],\r\n         'layout': {'barmode': 'overlay',\r\n          'legend': {'bgcolor': '#F5F6F9', 'font': {'color': '#4D5663'}},\r\n          'paper_bgcolor': '#F5F6F9',\r\n          'plot_bgcolor': '#F5F6F9',\r\n          'title': 'main title',\r\n          'titlefont': {'color': '#4D5663'},\r\n          'xaxis1': {'gridcolor': '#E1E5ED',\r\n           'showgrid': True,\r\n           'tickfont': {'color': '#4D5663'},\r\n           'title': '',\r\n           'titlefont': {'color': '#4D5663'},\r\n           'zerolinecolor': '#E1E5ED'},\r\n          'yaxis1': {'gridcolor': '#E1E5ED',\r\n         \r\n           'showgrid': True,\r\n           'tickfont': {'color': '#4D5663'},\r\n           'title': '',\r\n           'titlefont': {'color': '#4D5663'},\r\n           'zerolinecolor': '#E1E5ED'}}}\r\n        )\r\n\r\nThis is the result. \r\n![capture](https://user-images.githubusercontent.com/7884934/29923480-afcb7d68-8e27-11e7-94cf-124482e75205.PNG)\r\n\r\nThe trick is to write the lower bound as base and the difference as y values. This also takes care of the fact that having both positive and negative values screw things up, since the user has complete control over where each color starts and ends. \r\n\r\nThe main limitation that that when you hover over the bar, as you can see in the above image, the lowest bound data does not show up ( in our example that would be 1. )   How can I fix that ? \r\n"}}
{"actor":{"display_login":"flyingBurman"}}