How to move a specific Plotly chart up with CSS without affecting other charts?

Using Streamlit
1

Hi everyone,

I’m working on a stock analyzer dashboard and I need to move one specific Plotly chart upward (apply negative margin-top or position it higher) to align it with labels in an adjacent column, but WITHOUT affecting any other Plotly charts on the page.

image
image3206×1514 232 KB

My setup:

  • I have multiple Plotly charts on the page (in different sections: Risk gauges, Sentiment bar charts, and a Technical line chart)

  • The Technical section uses st.columns([1, 3]) - left column has date inputs and controls, right column has the chart

  • I want to move ONLY the Technical chart up by about 70px to align its top with the “Start Date” label in the left column

What I’ve tried (all failed):

  1. Global CSS selector - This moved ALL Plotly charts:

python

st.markdown("""
<style>
.element-container:has(.js-plotly-plot) {
    margin-top: -50px !important;
}
</style>
""", unsafe_allow_html=True)
  1. Wrapping with div + CSS - Didn’t move the chart:

python

st.markdown('<div class="tech-chart-wrapper">', unsafe_allow_html=True)
st.plotly_chart(fig_tech, use_container_width=True)
st.markdown('</div>', unsafe_allow_html=True)
# With CSS: .tech-chart-wrapper { margin-top: -70px !important; }
  1. Using unique ID with sibling selector - Made it go down instead of up:

python

st.markdown('<div id="technical-chart-unique"></div>', unsafe_allow_html=True)
# With CSS: #technical-chart-unique ~ div { margin-top: -70px !important; }
  1. Position relative - No effect:

python

st.markdown('<div class="tech-chart-wrapper-unique">', unsafe_allow_html=True)
# With CSS: .tech-chart-wrapper-unique { position: relative; top: -70px; }
  1. Targeting nth-child column - Moved ALL second columns on the entire page:

python

[data-testid="column"]:nth-child(2) { margin-top: -70px !important; }

Streamlit seems to ignore CSS on wrapper divs I create, and any selector that’s general enough to work affects ALL charts, not just the one I want.

How can I apply negative margin or positioning to move ONE specific Plotly chart upward without affecting the others? Is there a way to give a specific st.plotly_chart() a unique identifier that CSS can target?

Any help would be greatly appreciated!

2

You could adjust the top margin of the plotly Figure itself by modifying its layout:

fig.update_layout(margin={"t": 0})

Or try placing the Figure inside a st.container, give it a key, and apply the CSS selector to only that container.