Plotly Chart Advice

Hi, I am hoping someone could potentially steer me in the right direction?

I have a data set that looks like the following -

dataset

and my streamlit and plotly code looks like the following -

import pandas as pd
import plotly.express as px
import streamlit as st

st.set_page_config(page_title=“Chart”, layout=“wide”)

df = pd.read_excel(
io=‘chart1.xlsx’,
engine=‘openpyxl’,
sheet_name=‘Sheet1’,
skiprows=1,
usecols=‘A:D’,
nrows=200,
)

st.sidebar.header("Please filter here: ")
infra = st.sidebar.multiselect(
“Select the infrastructure:”,
options=df[“Infrastructure”].unique(),
default=df[“Infrastructure”].unique()
)

st.sidebar.header("Please filter Score here: ")

score = st.sidebar.multiselect(

“Select the scores:”,

options=df[“Score”],

default=df[“Score”]

)

st.sidebar.header("Please filter dates here: ")
dates = st.sidebar.multiselect(
“Select the dates:”,
options=df[“Date”].dt.date.unique(),
default=df[“Date”].dt.date.unique()
)
df_selection = df.query(
“Infrastructure == @infra & Date == @dates
)

-------------- MAINPAGE------------

st.title(“Vulnerability Chart”)
st.markdown(“##”)

vulnerability_chart = px.bar(
df_selection,
x=[“Vulnerability Type”, “Date”],
y=“Score”,
orientation=“v”,
title=“Vulnerabilities over Time”,
color=“Infrastructure”,
template=“plotly_white”,
)

st.plotly_chart(vulnerability_chart)

hide_st_style = “”"

#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
header {visbility: hidden;}

“”"
st.markdown(hide_st_style, unsafe_allow_html=True)

What I am trying to achieve is a chart that looks like the following -

where on the x-axis its per month and the individual vulnerability types are also on the x-axis per month with the count being on the y-axis… If anyone could shed any light it would be awesome! Thank you…