Fixed Chart below a scrolling wide Table

I have a view split into two sections: In the top section, I have a Perspective Table with many columns, so horizontal scrolling is required to see the whole table. In the bottom section, I have a Chart that displays a data trend when I click on a specific cell in the table.

I want the Chart to remain fixed in position within the view, regardless of how far I scroll the Table horizontally. Currently, the Chart seems to inherit the width of the table (which is huge).

I would like to avoid using a Docked View at the bottom. The current workflow allows operators to click through cells very quickly with instant chart updates. I worry that using a Docked View would require opening and closing it repeatedly, which would slow down the user experience.

Has anyone managed to keep a component fixed in the view while another component scrolls horizontally above it?

Thanks!

Start with a flex container. Set this flex container as a column type.
Into that flex container add another flex container, this time a row type with basis: 50%
Double click into the row container to deep-select it.
Add your table here with grow: 1 shrink: 0 basis: {insert your table width here thats wider than the screen in px}
Deep-select the root view.
Add your chart with basis: 50%

You now should be able to scroll the table left and right without affecting the chart.

1 Like

Thanks for the answer, it works.

In addition to your suggestions I also set the width and height size of the view to auto.

1 Like