# Issue with filtering a bar graph

**URL:** <https://community.plotly.com/t/issue-with-filtering-a-bar-graph/92268>\
**Category:** 📊 Plotly Python\
**Created:** [May 12, 2025, 5:53pm UTC](https://community.plotly.com/t/issue-with-filtering-a-bar-graph/92268 "2025-05-12T17:53:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![PlottingPlotly](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@PlottingPlotly](https://community.plotly.com/u/PlottingPlotly)\
**Post date:** [May 12, 2025, 5:53pm UTC](https://community.plotly.com/t/issue-with-filtering-a-bar-graph/92268/1 "2025-05-12T17:53:40Z")

</div>

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?

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/3/d3fff324dd043c57217e2d3c53359c50dfeb7a66.png)

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/4/44b1d1792b9b3e1435eb7419b18abfb4385d3cd4.png)

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.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [May 13, 2025, 5:58am UTC](https://community.plotly.com/t/issue-with-filtering-a-bar-graph/92268/2 "2025-05-13T05:58:37Z")

</div>

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**
>
> ```python
> 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)
> 
> ```

---

<div class="post-metadata">

**Author:** ![PlottingPlotly](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@PlottingPlotly](https://community.plotly.com/u/PlottingPlotly)\
**Post date:** [May 13, 2025, 2:10pm UTC](https://community.plotly.com/t/issue-with-filtering-a-bar-graph/92268/3 "2025-05-13T14:10:42Z")

</div>

Edited the OP with more details.