Plot stacked barchar with fixed order based on external column

I have a dataframe that looks like this:

index, start, end, bar_len,name,color, gr
1,2300000.0,5300000.0,3000000.0,p36.32,#949494. g1
2, 5300000.0,7100000.0,1800000.0,p36.31,#FFFFFF,  g1
3, 7100000.0,9100000.0,2000000.0,p36.23,#949494, g1
4, 9100000.0,12500000.0,3400000.0,p36.22,#FFFFFF, g1

I want to create an horizontal stacked barchar with the following output:

| - indx[1] [len=bar_len] | - indx[2] [len=bar_len] | - indx[3] [len=bar_len] | - indx[4] [len=bar_len]

I tried doing this the following way:

import plotly.express as px
import pandas as pd

input_path = r"example.csv"
df = pd.read_csv(input_path)
df.set_index('start')
fig = px.bar(
    df, x='bar_len', y='gr', color="DS_COLOR", orientation='h',
)

fig.update_layout(barmode='stack', xaxis={'categoryorder':'category ascending'})

The problem is that the values plotted on the barchar are not sorted by start column, which is what I am trying to do. Therefore, my question is: is there any way to plot a stacked bachar that plots the length of each of the elements based on one of the columns (bar_len) and sorts these plotted elements based on another column (start)?

UPDATE: I have seen that the problem raises when including the color label. This label resorts the barchart based on the color instead of preserving the original order based on index column. Is there any way to avoid this?

@asdrgil Is this what you are looking for?. I have removed leading zeros from the number to make it easy to read.

d = {'index':[1,2,3,4],
'start':[23,53,71,91],
'end':[5300000,7100000,9100000,12500000],
'bar_len':[30,18,20,34],
'name':['p36.32','p36.31','p36.23','p36.22'],
'color':['#949494','#FFFFFF','#949494','#FFFFFF'],
'gr':['g1','g1','g1','g1']}

df = pd.DataFrame(d)
df_melt = df.melt(id_vars=['start','color'], value_vars=['bar_len'])
fig = px.bar(df_melt, y='start', x='value', color='color', orientation='h')
fig.update_yaxes(type='category')
fig.show()