Issue with filtering a bar graph

📊 Plotly Python
1

I’m having difficulty with a filter for a double stacked bar plot. When I filter the remaining pieces of the bars don’t restack back together. It simply looks like parts of the visualization are floating.

Previously I’ve been told that plotly version 6.0.1 automatically resolves this issue but unfortunately I am currently stuck on version 5.9. Is there any other options to correctly filter this visualization?

import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import plotly.express as px
import dash_bootstrap_components as dbc
import flask
import pandas as pd
import time
import os
import pandas as pd
import plotly.express as px
from plotly import graph_objects as go

server = flask.Flask('app')
server.secret_key = os.environ.get('secret_key', 'secret')

# Define app object with url_base_pathname value from setup.sh
app = dash.Dash('app', server=server,external_stylesheets=[dbc.themes.VAPOR], url_base_pathname='path')

data = {
    "left": [
        {"PMXG": 15, "CMXG": 4, "EMXG": 0, "AMXG": 14,"MMXG": 0},
        {"PMXG": 23, "CMXG": 8, "EMXG": 18, "AMXG": 9, "MMXG": 16},
        {"PMXG": 0, "CMXG": 18, "EMXG": 18, "AMXG": 19, "MMXG": 0}
    ],
    "right": [
        {"PMXG": 7, "CMXG": 3, "EMXG": 0, "AMXG": 7, "MMXG": 0},
        {"PMXG": 12, "CMXG": 6, "EMXG": 8, "AMXG": 11, "MMXG": 19},
        {"PMXG": 0, "CMXG": 8, "EMXG": 10, "AMXG": 4, "MMXG": 0}
    ],
    "labels": [
        "OCX",
        "OOX",
        "WRX"
    ]
}

fig = go.Figure()

colors = {
    "PMXG": "#636EFA",
    "CMXG": "#EF553B",
    "EMXG": "#00CC96",
    "AMXG": "#bb33ff",
    "MMXG": "#ff1700"
}

def add_stacked_bar(side, offset_group):
    side_data = data[side]
    for i, category in enumerate(data["labels"]):
        current_base = 0
        for model_type in ["MMXG","PMXG","CMXG","EMXG","AMXG"]:
            value = side_data[i].get(model_type, 0)
            if value > 0:
                fig.add_trace(go.Bar(
                    name=f"{model_type.replace('_', ' ').title()} ({side.title()})",
                    x=[category],
                    y=[value],
                    offsetgroup=offset_group,
                    base=current_base,
                    marker_color=colors[model_type],
                    legendgroup=model_type,
                    showlegend=(i == 1)
                ))
                current_base += value

add_stacked_bar("left", 0)
add_stacked_bar("right", 1)

fig.update_layout(
    
    
    title="Workload Table Summary",
    yaxis_title="Number of Workloads",
    barmode='group',
    legend_title="AWT Groups",
    legend=dict(
        orientation="h",
        yanchor="bottom",
        y=1.02,
        xanchor="right",
        x=1
    )
app.layout = html.Div(children=[
    # All elements from the top of the page
  dbc.Row([
    # New Div for all elements in the new 'row' of the page
   #dbc.Col(dcc.Graph(id = 'graph1',figure = plot,style={'width':'90%'})),
   dbc.Col(dcc.Graph(id='graph2',figure=fig, style={'width': '90%'}))
  ])
         
])
)

Below is an image of the visualization, pre-filter.

image
image787×396 40.6 KB

And here is an image of what it looks like when I filter it.

image
image828×434 41.4 KB

The final visualization after filtering should appear like the first image, just with one less section and no empty space between the sections in each bar.

2

Hey @PlottingPlotly could you detail what the issue is? I can´t see any filtering. What should the graph look like?

For anyone interested in helping, i changed the above to be an reproducible example

MRE 
import dash
import dash_bootstrap_components as dbc
from plotly import graph_objects as go
from dash import html, dcc

app = dash.Dash('app', external_stylesheets=[dbc.themes.VAPOR])

data = {
    "left": [
        {"PMXG": 15, "CMXG": 4, "EMXG": 0, "AMXG": 14, "MMXG": 0},
        {"PMXG": 23, "CMXG": 8, "EMXG": 18, "AMXG": 9, "MMXG": 16},
        {"PMXG": 0, "CMXG": 18, "EMXG": 18, "AMXG": 19, "MMXG": 0}
    ],
    "right": [
        {"PMXG": 7, "CMXG": 3, "EMXG": 0, "AMXG": 7, "MMXG": 0},
        {"PMXG": 12, "CMXG": 6, "EMXG": 8, "AMXG": 11, "MMXG": 19},
        {"PMXG": 0, "CMXG": 8, "EMXG": 10, "AMXG": 4, "MMXG": 0}
    ],
    "labels": [
        "OCX",
        "OOX",
        "WRX"
    ]
}

fig = go.Figure()

colors = {
    "PMXG": "#636EFA",
    "CMXG": "#EF553B",
    "EMXG": "#00CC96",
    "AMXG": "#bb33ff",
    "MMXG": "#ff1700"
}


def add_stacked_bar(side, offset_group):
    side_data = data[side]
    for i, category in enumerate(data["labels"]):
        current_base = 0
        for model_type in ["MMXG", "PMXG", "CMXG", "EMXG", "AMXG"]:
            value = side_data[i].get(model_type, 0)
            if value > 0:
                fig.add_trace(
                    go.Bar(
                        name=f"{model_type.replace('_', ' ').title()} ({side.title()})",
                        x=[category],
                        y=[value],
                        offsetgroup=offset_group,
                        base=current_base,
                        marker_color=colors[model_type],
                        legendgroup=model_type,
                        showlegend=(i == 1)
                    )
                )
                current_base += value


add_stacked_bar("left", 0)
add_stacked_bar("right", 1)

fig.update_layout(
    title="Workload Table Summary",
    yaxis_title="Number of Workloads",
    barmode='group',
    legend_title="AWT Groups",
    legend=dict(
        orientation="h",
        yanchor="bottom",
        y=1.02,
        xanchor="right",
        x=1
    )
)
app.layout = html.Div(children=[
    # All elements from the top of the page
    dbc.Row([
        # New Div for all elements in the new 'row' of the page
        # dbc.Col(dcc.Graph(id = 'graph1',figure = plot,style={'width':'90%'})),
        dbc.Col(dcc.Graph(id='graph2', figure=fig, style={'width': '90%'}))
    ])

])

if __name__ == "__main__":
    app.run(debug=True)
3

Edited the OP with more details.