Grouped bar charts do not work with multiple Y axes

[iustin]

Hi,

it seems that having a graph with group bar charts and multiple Y axis doesn't work. I've created the trivial graph https://plot.ly/~iustin/4/grouped-bar-chart-with-multiple-axes/ and tested that switching Col3 between yaxis and yaxis2 also toggles between grouped and non-grouped.

Is this intended? Logically speaking, it makes sense to be able to do this, so I guess it's only a technical limitation.

[iustin]

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

[alexcjohnson]

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.

[dprice60]

+1

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

[mbonaci]

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

[dprice60]

@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.

[mbonaci]

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

[dprice60]

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.

[mbonaci]

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

[alexcjohnson]

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.

[mbonaci]

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

[ngarcial]

+1

[eagor]

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

[allanelder]

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