Grouped bar charts do not work with multiple Y axes about plotly.js HOT 34 OPEN

The code below would be a workaround if you really need grouped bar charts with multiple axes. Here trace2 stacks on trace 0, trace 3 stacks on trace 1.

trace0 = go.Bar(x = ['a','b','c'], y=[10,20,30])
trace1 = go.Bar(x = ['a','b','c'], y=[0],showlegend=False,hoverinfo='none')
trace2 = go.Bar(x = ['a','b','c'], y=[0], yaxis='y2',showlegend=False,hoverinfo='none') 
trace3 = go.Bar(x = ['a','b','c'], y=[30,35,60], yaxis='y2') 
data = [trace0,trace1,trace2,trace3]#,trace2
layout = go.Layout(barmode='group',
                   legend=dict(x=0, y=1.1,orientation="h"),
                   yaxis=dict(title='2017 Increase(%)'),
                   yaxis2=dict(title = 'Transaction Count 2016(AUD)',
                               overlaying = 'y',
                               side='right'))
fig = go.Figure(data=data, layout=layout)
offline.iplot(fig)

from plotly.js.

PR #3529 introduced (set to be released in v1.45.0) will introduced a way around to default behavior using a new bar attribute: offsetgroup.

See https://codepen.io/etpinard/pen/yZQYzq?editors=1010 for an example.

from plotly.js.

This is my workaround with 2 series and 2 categories. Adjusting opacity only made it look like stacked so I changed the width as well.

For me, it really depends on the data to come up with the workaround though. I'd change those narrow bars to lines or some subtle marks if I feel it would represent the relationship between 2 series better.

Having said, I still need to have the grouped bars with 2 axes in some cases.

from plotly.js.

@real-np could you explain how you got the bars to appear side-by-side instead of overlayed directly on top of eachother?

from plotly.js.

A hack that can get the effect you want is to make dummy traces with one point each and zero value, in place of each trace on the other y axis. So for example, if you want the first trace on y and the second on y2, make 4 traces:

Plotly.newPlot(div, [
    // real trace on the left y axis
    {x:[1,2,3,4], y:[1,2,3,4], type: 'bar'},
    // invisible second trace in the first group
    {x:[1], y: [0], type: 'bar', hoverinfo: 'none', showlegend: false},
    // invisible first trace in the second group
    {x:[1], y: [0], type: 'bar', yaxis: 'y2', hoverinfo: 'none', showlegend: false},
    // real trace on the right y axis
    {x:[1,2,3,4], y:[40,30,20,10], type: 'bar', yaxis: 'y2'}
],
{
    yaxis2: {side: 'right', overlaying: 'y'}
});

Be warned though that once this issue is fixed, plots using this hack will break - this plot would then show up as a single group of 4 traces, two of which are invisible but still get space allotted to them.

from plotly.js.

+1

from plotly.js.

@allanelder Here's how to fix it: http://codepen.io/etpinard/pen/pbGYGv

plotly.js axes are plotted in order starting from y, y2, y3, ... so in order to make the bar trace appear below the scatter trace, you need to place the bar trace on y and the scatter trace on y2.

from plotly.js.

PR #3529 introduced (set to be released in v1.45.0) will introduced a way around to default behavior using a new bar attribute: offsetgroup.

See https://codepen.io/etpinard/pen/yZQYzq?editors=1010 for an example.

Hi etpinard,

is it intended that the yaxis and yaxis2 grids are not aligned? I thought {"anchor":"x"} was doing that. I also have unaligned grid axis with an horizontal bar chart I made (see below, sorry did not make it with codepen):

{'data': [{'name': 'some_metric',
   'offsetgroup': '0',
   'orientation': 'h',
   'x': array([0.61354582, 0.33720317]),
   'xaxis': 'x',
   'y': ['orangoutans', 'chimpanzee'],
   'type': 'bar',
   'uid': 'fe706d20-fccc-427c-8931-760de1217db7'},
  {'name': 'another_metric',
   'offsetgroup': '1',
   'orientation': 'h',
   'x': array([0.61354582, 0.04379947]),
   'xaxis': 'x',
   'y': ['orangoutans', 'chimpanzee'],
   'type': 'bar',
   'uid': '5cb8bafe-c455-4df3-ad9e-445b81f68682'},
  {'name': 'yet_another_metric',
   'offsetgroup': '2',
   'orientation': 'h',
   'x': array([0.00398406, 0.01002639]),
   'xaxis': 'x',
   'y': ['orangoutans', 'chimpanzee'],
   'type': 'bar',
   'uid': 'fc5e2de7-aa67-4df5-8f0b-03c748f7bb2e'},
  {'marker': {'color': '#7f8793'},
   'name': 'some_metric_on_other_axis',
   'offsetgroup': '3',
   'orientation': 'h',
   'x': array([ 251, 1895], dtype=int64),
   'xaxis': 'x2',
   'y': ['orangoutans', 'chimpanzee'],
   'type': 'bar',
   'uid': '73351dfa-03d7-499e-afe4-ff4f9f851f14'}],
 'layout': {'bargap': 0,
  'bargroupgap': 0,
  'height': 100,
  'margin': {'autoexpand': True, 'l': 325.5, 'pad': 10},
  'title': {'text': 'Dual axis horizontal'},
  'xaxis': {'anchor': 'y',
   'automargin': True,
   'overlaying': 'x2',
   'side': 'top'},
  'xaxis2': {'anchor': 'y', 'automargin': True, 'side': 'bottom'}}}

from plotly.js.

@archmoj for that specific case it's working OK, but if you e.g. omit orangutans from the second trace, they overlap weirdly again.

from plotly.js.

Note: I used the above link just to show the issue; what I'm interested is to have this working in the JavaScript library.

from plotly.js.

Thanks @iustin - yes, we should be able to support that.

The rule (I think) should be: group bar traces that are on the same position axis, and on the same or overlaying the same size axis.

from plotly.js.

+1

Right now I am just using overlayed charts with a high alpha on each bar so that I can see through the overlay.

from plotly.js.

@dprice60 (or anyone else) could you upload an example of this workaround?
Thanks

from plotly.js.

@mbonaci Here is a simple one using the original example: https://plot.ly/~dprice60/0/grouped-bar-chart-with-multiple-axes/

That's all I have time to do right now, if you need me to do more I can try and put together something better later (like in a couple of days). The interface doesn't allow me to do everything that I normally have been doing but it let me get something up quick. If you click the code tab, I usually would replace the rgb(r,g,b) values with rgba(r,g,b,a). For the main color I've been using an alpha of .5 and for the stroke lines an alpha of 1. That helps make it more obvious that they are overlaying charts instead of stacked charts.

Hope that helps.

from plotly.js.

Thanks for that @dprice60, but that looks to me like the stacked type.
I expected from the grouped type that bars that have the same x value are positioned at y=0 and that there's a gap between such groups of different x value.

Something like this:

Which is exactly what happens when I remove the second, y2 axis:
https://plot.ly/~mbonaci/24/grouped-bar-chart-with-multiple-axes

from plotly.js.

I don't have a way to do grouped bar charts with multiple y axes. That is why I +1 one'd the issue and said what I'm doing in the meantime in case it helped anyone until a workaround is found. Sorry for the confusion @mbonaci. Like I said my intent was just to show how I am still making bar charts with multiple axes useful until the issue is resolved.

from plotly.js.

No, that's ok, I misunderstood your comment, or maybe was just hoping that you have a workaround :)
👍

from plotly.js.

Thanks @alexcjohnson, that was really helpful.
Just to clarify for others, since it's not trivial to deduce from only 2 traces, here's an example with 3:

Plotly.newPlot(placeholder, [
    // real trace on the left y axis
    {x:[1,2,3,4], y:[1,2,3,4], type: 'bar'},
    // invisible to make space for trace aligned to y2
    {x:[1], y: [0], type: 'bar', hoverinfo: 'none', showlegend: false, yaxis: 'y2'},

    // real trace on the left y axis
    {x:[1,2,3,4], y:[4,3,2,1], type: 'bar'},
    // invisible to make space for trace aligned to y2
    {x:[1], y: [0], type: 'bar', hoverinfo: 'none', showlegend: false, yaxis: 'y2'},

    // invisible to make space for trace aligned to y
    {x:[1], y: [0], type: 'bar', hoverinfo: 'none', showlegend: false},
    // real trace on the right, y2 axis
    {x:[1,2,3,4], y:[140,100,100,160], type: 'bar', yaxis: 'y2'}
  ], 
  {
    yaxis2: {side: 'right', overlaying: 'y'}
  }
);

Codepen: https://codepen.io/etpinard/pen/yGrEKp

from plotly.js.

is there similar trick to have multiple xaxis?
I need the grey bar below be positioned independently from green bars.

from plotly.js.

Not sure if this is the same issue or not, but adding a simple 2nd access to a multiple chart layout seems to cause overlay issues; can anyone suggest how to get the scatter to appear on top of the bar chart with the 2nd axis? Codepen here showing how it appears with one yaxis and with 2::

http://codepen.io/robroy72/pen/VjgRdA

from plotly.js.

Hi,

I tried @mbonaci and @alexcjohnson suggestion and it works for vertical chart. I want to try to make it work with horizontal bar charts and replaced x with y and vise versa, but it does not work. Any thoughts on this?

from plotly.js.

@alexcjohnson is this issue fixed or should we still use the workaround/hack you commented on 27 Jan 2016?

from plotly.js.

is this issue fixed

No.

we still use the workaround/hack you commented on 27 Jan 2016?

Yes.

from plotly.js.

Hi, any update in this issue. It would be really nice to have possibility to group bars from different axes. I used to use jquery flot plugin to create barcharts, and it supports that, but unfortunatelly it's no longer suported (project died I think).

from plotly.js.

@real-np yeah if you can attach some source code for that it would be great as I can't seem to figure out how to do two separate bar charts with two y axes

from plotly.js.

this issue has been on for 3 years, is their any plans to include it in the near future?

from plotly.js.

+1
Workaround looks off (the hidden data still shows kind of and shifts the sizing of things), box plot has the same issue. Grouping and multiple y axes could be accommodated in overlay mode for box types if explicit width and offset were available as they are for bar types.

from plotly.js.

Hello, does Plotly have an ETA to solve this issue?

from plotly.js.

+1 on looking for native solution to this. @XianjingFan in the meantime that workaround did the trick.

from plotly.js.

Also having the same issue.
Grouping works fine with 1 axes but when you add another, they overlay on top of each other.

from plotly.js.

@ThibTrip please use https://community.plot.ly/c/plotly-js for questions of the likes. Thank you!

from plotly.js.

@etpinard's demo using latest plotly.js seems to be working fine. Wondering if that workaround is enough to close this issue?

from plotly.js.

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

from plotly.js.

@real-np Hi, I have tried and looked up for many methods to plot such figure, but I still can't overlay two grouped barchart. Can you explain how you do it? Many thanks.

from plotly.js.