Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grouped bar charts do not work with multiple Y axes #78

Open
iustin opened this Issue Dec 5, 2015 · 30 comments

Comments

Projects
None yet
@iustin
Copy link

commented Dec 5, 2015

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 iustin changed the title Group bar charts do not work with multiple Y axes Grouped bar charts do not work with multiple Y axes Dec 5, 2015

@iustin

This comment has been minimized.

Copy link
Author

commented Dec 5, 2015

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

This comment has been minimized.

Copy link
Contributor

commented Dec 7, 2015

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

This comment has been minimized.

Copy link

commented Jan 4, 2016

+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

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2016

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

@dprice60

This comment has been minimized.

Copy link

commented Jan 26, 2016

@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

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2016

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:
image

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

@dprice60

This comment has been minimized.

Copy link

commented Jan 26, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2016

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

@alexcjohnson

This comment has been minimized.

Copy link
Contributor

commented Jan 27, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Jan 28, 2016

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

This comment was marked as outdated.

Copy link

commented Jun 11, 2016

+1

@eagor

This comment has been minimized.

Copy link

commented Jun 15, 2016

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

@allanelder

This comment was marked as off-topic.

Copy link

commented Aug 15, 2016

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

This comment was marked as off-topic.

Copy link
Member

commented Aug 15, 2016

@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

This comment has been minimized.

Copy link

commented Oct 21, 2016

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

This comment was marked as off-topic.

Copy link

commented Apr 21, 2017

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

@etpinard

This comment was marked as off-topic.

Copy link
Member

commented Apr 21, 2017

is this issue fixed

No.

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

Yes.

@marcinwojciechowski

This comment was marked as outdated.

Copy link

commented Nov 14, 2017

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 comment has been minimized.

Copy link

commented Feb 1, 2018

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.

screen shot 2018-02-01 at 23 31 20

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.

screen shot 2018-02-01 at 23 42 38

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

@seriph

This comment has been minimized.

Copy link

commented Apr 19, 2018

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

@tadejmagajna

This comment was marked as off-topic.

Copy link

commented Jun 1, 2018

@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 comment was marked as off-topic.

Copy link

commented Jun 1, 2018

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

@majorrabbit

This comment has been minimized.

Copy link

commented Jun 19, 2018

+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

This comment was marked as off-topic.

Copy link

commented Aug 23, 2018

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

@XianjingFan

This comment has been minimized.

Copy link

commented Sep 24, 2018

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

This comment was marked as off-topic.

Copy link

commented Oct 9, 2018

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

@jwmann

This comment was marked as off-topic.

Copy link

commented Nov 23, 2018

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

@etpinard

This comment has been minimized.

Copy link
Member

commented Feb 15, 2019

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.

@ThibTrip

This comment has been minimized.

Copy link

commented Apr 15, 2019

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

2019-04-15 20_31_21-JupyterLab

@etpinard

This comment has been minimized.

Copy link
Member

commented Apr 15, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.