Custom sorting axis in plotly heatmap

Question

I would like to sort the xaxis of my heatmap in such a way that is in the same order as my yaxis. This means that the order would appear in such a way that the youngest age range appears first and each axis that appears thereafter is an incremental increase

Here is a sample of my data:

{'age_range': {0: '15-20',
  1: '15-20',
  2: '20-25',
  3: '20-25',
  4: '20-25',
  5: '20-25',
  6: '20-25',
  7: '20-25',
  8: '20-25',
  9: '20-25'},
 'opp_age_range': {0: '25-30',
  1: '25-30',
  2: '20-25',
  3: '20-25',
  4: '20-25',
  5: '20-25',
  6: '25-30',
  7: '25-30',
  8: '25-30',
  9: '25-30'},
 'division': {0: 'cruiser',
  1: 'super feather',
  2: 'feather',
  3: 'light',
  4: 'super bantam',
  5: 'welter',
  6: 'cruiser',
  7: 'feather',
  8: 'heavy',
  9: 'super bantam'},
 'sex': {0: 'male',
  1: 'male',
  2: 'male',
  3: 'male',
  4: 'male',
  5: 'male',
  6: 'male',
  7: 'male',
  8: 'male',
  9: 'male'},
 'wins': {0: 6, 1: 15, 2: 9, 3: 30, 4: 7, 5: 25, 6: 14, 7: 28, 8: 45, 9: 21},
 'loss': {0: 7, 1: 11, 2: 35, 3: 28, 4: 21, 5: 46, 6: 18, 7: 34, 8: 50, 9: 32},
 'draw': {0: 2, 1: 2, 2: 2, 3: 1, 4: 1, 5: 2, 6: 1, 7: 7, 8: 2, 9: 3},
 'other': {0: 1, 1: 1, 2: 1, 3: 2, 4: 2, 5: 1, 6: 1, 7: 1, 8: 1, 9: 1},
 'total_fights': {0: 16,
  1: 29,
  2: 47,
  3: 61,
  4: 31,
  5: 74,
  6: 34,
  7: 70,
  8: 98,
  9: 57},
 'win_rate': {0: 37.5,
  1: 51.724137931034484,
  2: 19.148936170212767,
  3: 49.18032786885246,
  4: 22.58064516129032,
  5: 33.78378378378378,
  6: 41.17647058823529,
  7: 40.0,
  8: 45.91836734693878,
  9: 36.84210526315789}}

This is what my current outlook looks like:

This is the code I have written thus far where fights contains some of the sample data I added in the first example:

 order = ['15-20', '20-25', '25-30', '30-35', '35-40', '40-45', '45-50']
    return {
        'data': [
            go.Heatmap(
                z=fights['win_rate'],
                y=fights['age_range'],
                x=fights['opp_age_range'],
                showscale=True)
        ],
        'layout': go.Layout(
            title='Wins rate by boxer age range',
            xaxis={'title':'Opposition age range'},
            yaxis={'title': 'Boxer age range'},
            hovermode='closest',
            paper_bgcolor='black',
        )
    }

I have also tried using tickvals to specify the order in which things should appear in my plots but this didn't change the order of my xaxis

'layout': go.Layout(
    title='Wins rate by boxer age range',
    xaxis={'title':'Opposition age range','tickvals': order},
    yaxis={'title': 'Boxer age range'},
    hovermode='closest',
    paper_bgcolor='black',
)

Answer 1

Your sample code was not very easily reproducible, so I'll show you how you can revere the order of the x axis using fig['layout']['xaxis']['autorange'] = "reversed" on the following heatmap exampe from plotly :

Code for default x-axis order:

import plotly.graph_objects as go

fig = go.Figure(data=go.Heatmap(
                    z=[[1, 20, 30],
                      [20, 1, 60],
                      [30, 60, 1]]))
fig.show()

Plot for default x-axis order:

Code for customized x-axis order:

import plotly.graph_objects as go

fig = go.Figure(data=go.Heatmap(
                    z=[[1, 20, 30],
                      [20, 1, 60],
                      [30, 60, 1]]))

fig['layout']['xaxis']['autorange'] = "reversed"
fig.show()

Plot for customized x-axis order:

---

And of course you can do the same thing with the y-axis:

Plot for customized x and y axis order:

Code for customized x and y axis order:

import plotly.graph_objects as go

fig = go.Figure(data=go.Heatmap(
                    z=[[1, 20, 30],
                      [20, 1, 60],
                      [30, 60, 1]]))

fig['layout']['xaxis']['autorange'] = "reversed"
fig['layout']['yaxis']['autorange'] = "reversed"
fig.show()

Answer 2

Resolved this issue by referring to the plotly figure reference .

According to the documentation categoryarray can be used to set the order in which categories in an axis appear.

This is what I wrote:

order = ['15-20', '20-25', '25-30', '30-35', '35-40']
    return {
        'data': [
            go.Heatmap(
                z=fights['win_rate'],
                y=fights['age_range'],
                x=fights['opp_age_range'],
                showscale=True)
        ],
        'layout': go.Layout(
            title='Wins rate by boxer age range',
            xaxis={'title':'Opposition age range','categoryarray': order},
            yaxis={'title': 'Boxer age range'},
            hovermode='closest',
            paper_bgcolor='black',
        )