Plotly.js: 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 :)
:+1:

[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

[etpinard]

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

[daftster]

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?

[SirExpie]

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

[etpinard]

is this issue fixed

No.

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

Yes.

[marcinwojciechowski]

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

[real-np]

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.

[seriph]

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

[tadejmagajna]

@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

[farahat80]

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

[majorrabbit]

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

[agtere]

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

[XianjingFan]

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)

[dvillagra]

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

[jwmann]

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

[etpinard]

PR https://github.com/plotly/plotly.js/pull/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.

[ThibTrip]

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'}}}

[etpinard]

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

[archmoj]

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

[nicolaskruchten]

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

[jackparmer]

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.