Unstack bars in a graph

📊 Plotly Python
1

I have created a graph that should host two traces by index, one under the other with this piece of code:

        trace_claimed = go.Bar(x=[dfc.iloc[i].values[0]], y=[dfc.iloc[i].values[2]], name='Claimed')
        trace_perceived = go.Bar(x=[dfc.iloc[i].values[0]], y=[-dfc.iloc[i].values[1]], name='Perceived')

Which should give:

image
image726×419 13.4 KB

Yet they seem to be stacked the one on the other:

stacked
stacked1358×610 98.4 KB

What is the way to unstack them? And to put the bar at the root of the axis rather than starting it from the top of the bar?

Here is my code:

# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv("cb_pb.csv", index_col=0)

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.H1(children='Scores of perfumes over claimed attributes'),
    html.Div(children='''National Sales Funnel Report.'''),
    dcc.Dropdown(
        id='perfume-dropdown',
        options=[{'label': x, 'value': x} for x in df.index.unique()],
        value='My Burberry - Eau de Parfum'
    ),
    html.Div(id='dd-output-container'),
    html.Div([
        dcc.Graph(id='the_graph')
    ])
])

@app.callback(
    Output(component_id='the_graph', component_property='figure'),
    [Input(component_id="perfume-dropdown", component_property="value")]
)
def update_graph(my_dropdown):
    dfc = df.sort_values(by='perceived_benefit', ascending=False)
    traces = []
    for i in range(len(dfc)):
        if dfc.iloc[i].name == my_dropdown:
            trace_claimed = go.Bar(x=[dfc.iloc[i].values[0]], y=[dfc.iloc[i].values[2]], name='Claimed')
            trace_perceived = go.Bar(x=[dfc.iloc[i].values[0]], y=[-dfc.iloc[i].values[1]], name='Perceived')
            traces.append(trace_claimed)
            traces.append(trace_perceived)
    figure={
        'data': traces,
        'layout':
            go.Layout(title='Score des parfums sur les attributs', barmode='stack')
    }

    return figure

@app.callback(
    Output('dd-output-container', 'children'),
    [Input('perfume-dropdown', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)