Sorting issues with multicategories

[ThibTrip]

Hello,

as you can see here my chart is not correctly sorted by the x-axis and the line goes back which is really not an expected behavior.

I found out that a workaround is to add "missing" x labels (as in missing months in this case, see below) with None in y values but in my case it is very impractical.

First of all it will make the graph overly large (spans over 5 years in some cases but I do not have data for all months, far from that). Also I'm using this graph with dash and the data gets transformed a lot which makes adding missing labels quite tedious.

EDIT:

Another option you might think is to just use the month names in this case. Turns out that does not work either:

Thanks in advance for checking out the issue,

Thibault

Reproducible example with version 3.7.1 in offline mode

import plotly.graph_objs as go



x_axis = [[2017, 2017, 2017, 2017, 2017, 2017, 2017, 2017, 2018, 2018,2018, 2018], 
             [4, 5, 6, 8, 9, 10, 11, 12, 1, 2, 3, 4]]
y1 = [ 57246.,   1587.,  63189.,  30680.,  26071., 117519.,  27519.,  42643., 8559.,  22355.,  59363.,  62955.]
y2 = [0.22991999, 0.27284184, 0.18438336, 0.24866362, 0.18280848, 0.19382398, 0.17268069, 0.18802617, 0.17560463, 0.13415343, 0.14773512, 0.31319196]


# all arrays must have the same length
assert len(x_axis[0]) == len(x_axis[1]) == len(y1) == len(y2)


test_figure = go.Figure({
    'data': [{'name': 'Fruits',
              'type': 'bar',
              'x': x_axis,
              'y': y1},
             
             {'name': 'Price',
              'type': 'scatter',
              'x': x_axis,
              'y': y2,
              'yaxis': 'y2'}],
    
    
    'layout': {'height': 600,
               'showlegend': True,
               'yaxis': {'showgrid': True, 'title': {'text': 'Fruits volume'}},
               'yaxis2': {'anchor': 'x',
                          'overlaying': 'y',
                          'showgrid': False,
                          'side': 'right',
                          'title': {'text': 'Price per unit'}}}
})


from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
iplot(test_figure)

Related issue on plotly.js

The issue I'm describing here should have been fixed in version 1.43.1 of plotly.js.
See https://github.com/plotly/plotly.js/blob/master/CHANGELOG.md#1431----2018-12-21
(issue 3362)

Even though plotly.py uses a superior version as you can see there is still an issue.

[jonmmease]

Thanks for the report @ThibTrip, I've opened plotly/plotly.js#3723 to discuss with the plotly.js team.

[IceflowRE]

Just dropping another example:

Note the commented line in data which also reverese the sub category sorting.

import pandas as pd
import plotly.graph_objects as go

data = [
    [0, "Born", 4, "Rhino"],  # commenting this line will also reverse sub category sorting
    [0, "Died", -1, "Rhino"],
    [1, "Born", 4, "Lion"],
    [1, "Died", -1, "Lion"],
    [2, "Born", 12, "Rhino"],
    [2, "Died", -5, "Lion"],
]
z_data = list(zip(*data))

df = pd.DataFrame({
    "tick": z_data[0],
    "category": z_data[1],
    "value": z_data[2],
    "type": z_data[3],
})
df = df.sort_values(by=['tick', 'category', 'value', 'type'])
print(df)
fig = go.Figure()
for t in df.type.unique():
    plot_df = df[df.type == t]
    fig.add_trace(go.Bar(
        x=[plot_df.tick, plot_df.category],
        y=abs(plot_df.value),
        name=t,
    ))
fig.update_layout({
    'barmode': 'stack',
    'xaxis': {
        'title_text': "Tick",
        'tickangle': -90,
    },
    'yaxis': {
        'title_text': "Value",
    },
})
fig.write_html(str("./diagram.html"))

[gvwilson]

Hi - we are currently trying to tidy up Plotly's public repositories to help us focus our efforts on things that will help users most. Since this issue has been sitting for several years, I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our backlog. Thanks for your help - @gvwilson

[IceflowRE]

Hi - we are currently trying to tidy up Plotly's public repositories to help us focus our efforts on things that will help users most. Since this issue has been sitting for several years, I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our backlog. Thanks for your help - @gvwilson

This is also a way to reduce the issue count.
This issue is still valid. I actually see no sense in opening a new issue, as all required information are already here. But the problem might be just in plotly.js.