Repository navigation
Zoom Data control doesn't fit into the panel #37286
Description
Bug description
Superset 6.0
Zoom Data control doesn't fit into the panel
Superset version
Superset 6.0
Python version
3.9
Node version
16
Browser
Chrome
{{ message }}
Activity
dosubot commentedon Jan 20, 2026
This issue is likely caused by how Superset calculates and reserves space for the Zoom Data control (the dataZoom slider) in time-series charts. The control is rendered as part of the ECharts options and its position and size are determined by constants like
zoomBottomandgridOffsetBottomZoomable, as well as the dynamic height of extra controls above the chart. If the dashboard panel is too small, or if extra controls are shown, the zoom slider can overflow or not fit properly because there’s no explicit width or overflow handling for these controls in the main chart component. This can be made worse by CSS or container sizing issues, such as restrictive height or overflow settings in parent containers or panels. Recent fixes (like PR #36531) improved overflow and display handling for chart controls, so make sure your environment includes these updates.If you still see the problem, try increasing the panel/container height, check for any restrictive CSS (like
overflow: hiddenor fixed heights), and see if the issue persists in other browsers. If you’re using custom dashboard layouts or plugins, they might also affect sizing. For more details, see the relevant code for the chart and controls and how the zoom control is configured.To reply, just mention @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other
sonfire186 commentedon Jan 20, 2026
@dosubot PR #36531
It doesn't solve the problem.
dosubot commentedon Jan 20, 2026
You're right—PR #36531 only addressed some general UI clipping by tweaking CSS, but it doesn't fix the root cause of the Zoom Data control not fitting in the panel. The main issue is that the zoom slider (dataZoom) in time-series charts uses fixed bottom padding and offset constants for its placement, with no dynamic or responsive adjustment if the panel is too small or extra controls are present. There's also no explicit overflow or width handling for the control, so it can overflow or get clipped in cramped layouts.
A common workaround for similar UI issues is to set container heights to 100vh instead of 100% or enable scrollbars, but this may not fully solve the zoom control problem in all cases. The relevant code is in the EchartsTimeseries.tsx and transformProps.ts files, where the zoom slider's space is reserved using fixed constants like TIMESERIES_CONSTANTS.zoomBottom and gridOffsetBottomZoomable, and no responsive logic is applied if the available space is insufficient.
A more robust fix would involve making the zoom control's placement and sizing responsive to the actual panel size, possibly by dynamically adjusting the bottom offset or enabling overflow handling in the chart container. For reference, see the EchartsTimeseries component and transformProps logic.
No recent PRs or threads directly address this, so a code change targeting these areas would be needed for a complete solution.
To reply, just mention @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other
sonfire186 commentedon Jan 21, 2026
@dosu problem isn't the slider, it's the buttons on top
dosubot commentedon Jan 21, 2026
Thanks for clarifying—this is a known limitation in how Superset lays out the buttons and controls above the chart. The buttons (like radio buttons for stacking/area options, or other extra controls) are rendered in a centered container with no responsive logic or width constraints, so if the panel is narrow or there are many/long labels, they can overflow or get clipped. The layout relies on fixed grids and minimum widths, and there’s no overflow handling or wrapping for these controls, which is why they don’t fit in tight spaces. You can see this in the code for the ExtraControls and ControlRow components, which use fixed column grids and centered alignment without adapting to available space [source] [source].
There isn’t a built-in fix yet. As a workaround, you can try increasing the panel width, reducing the number of controls, or using shorter labels. For a more robust solution, the layout would need to be updated to support responsive wrapping or horizontal scrolling for these button containers.
To reply, just mention @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other
rusackas commentedon Jan 23, 2026
We're open to a PR if you want to investigate the right way to tackle this!
sfirke commentedon Feb 12, 2026
Agreed, I came here to report this. A user was complaining that she can't click the "All" and "Inv" buttons because the data zoom rectangles are blocking them:
I don't actually know what the point of those rectangles are, I always just use the data zoom slider on the bottom of the chart.
FWIW I replicated this in both Firefox and Chrome, Superset 6.0.0.
manojshetty2004 commentedon Mar 10, 2026
I’m working on reproducing this issue locally and investigating the layout problem with the Zoom Data control in the control panel. I’ll look into the frontend component responsible for this and try to submit a fix soon.
Please let me know if anyone else is currently working on it or if there are any pointers on where the preferred fix should be applied.
sfirke commentedon Mar 10, 2026
Thanks @manojshetty2004 ! It wouldn't hurt to search the open pull requests to make sure no one else has tackled this, but otherwise I'm not aware of anyone working on this and we would appreciate the fix.
manojshetty2004 commentedon Mar 15, 2026
Hi, I’ve submitted a PR that makes the
dataZoomslider bottom offset responsive to the chart height instead of relying on a fixed constant. This helps prevent the zoom control from being clipped or overflowing in smaller panels.Fixes #37286
manojshetty2004 commentedon Mar 28, 2026
Hi,
I’ve attached before and after screenshots to highlight the issue and the improvement after applying the fix. This provides a clearer view of the changes in behavior.
Let me know if there are any additional scenarios I should consider — happy to iterate!
test(echarts): add safety margin to legend/toolbox clearance regressi…