Plotly JSON Chart Height Not Dynamically Resizing Despite Correct layout.height Value

đź’¬ App Building
, , ,
1

I'm building a heatmap using Retool's Plotly JSON Chart component and need the chart height to scale dynamically based on the number of rows in my data (which can range from 50 to 1000+ rows).

What I've Done:

  1. My JavaScript query calculates the height: height = (numberOfRows Ă— 10px) + 150px

  2. This value is correctly set in layout.height in the returned JSON

  3. I can verify the height is calculated correctly - when I check plotlyJsonChart.plotlyLayoutJson.height, it shows the right value (e.g., 1500px for 150 rows)

The Problem:

Despite the layout.height value being correct, the Plotly component does not resize to match it. The chart either:

  • Squishes all rows into a fixed container height (making them unreadable), or

  • Stretches rows to fill a fixed container height (making them too tall)

The component's visual size on the canvas (e.g., "12 Ă— 460" in grid units) stays fixed regardless of the layout.height value.

What I've Tried:

  • Setting height in the JavaScript query's layout object (value is correct but ignored)

  • Using {{ graphCreator.data.rowCount * 10 + 150 }} in the Layout JSON field (breaks the layout)

  • Wrapping in a Container with various height settings (no dynamic height option found)

  • Setting autosize: true/false (no effect)

  • Using spread operator to override height (doesn't work in Retool JSON fields)

The Question:

How can I make the Plotly JSON Chart component's actual rendered size match the layout.height value I'm setting? The component seems to have its own container size that overrides the Plotly layout height.

Is there a way to programmatically control the component's canvas size, or make it respect the layout.height value from the JSON?

1 Like
4

Hello @Jamie_Bell-Thomas, and welcome to the Retool community!

I completely understand what you’re running into. At the moment, the Plotly JSON Chart component in Retool does not support an “Auto height” mode — it only lets you set a fixed component height in the right-side inspector. Because of that, even if layout.height inside your Plotly JSON is correct, the component container itself will not resize dynamically.

To investigate this more deeply, I created a mock dataset to simulate a heatmap with anywhere from 50–1000 rows. Here’s the mock data generator I used:

const rows = 150; // change to test 50, 500, 1000

const labels = Array.from({ length: rows }).map((_, i) => `Row ${i+1}`);
const cols = 24; // e.g., hours
const colLabels = Array.from({ length: cols }).map((_, i) => `Col ${i+1}`);

const matrix = labels.map(() =>
  Array.from({ length: cols }).map(() => Math.floor(Math.random() * 100))
);

return {
  rowCount: rows,
  rowLabels: labels,
  colLabels,
  matrix
};

Then I fed this into a Plotly JSON Builder with dynamic height calculations:

const data = mockHeatmapData.data;

const height = data.rowCount * 10 + 150; 
// 10px per row + padding

return {
  data: [
    {
      type: "heatmap",
      z: data.matrix,
      x: data.colLabels,
      y: data.rowLabels,
      colorscale: "Viridis"
    }
  ],
  layout: {
    title: "Dynamic Height Heatmap",
    height: height,
    margin: { l: 120, r: 20, t: 60, b: 40 },
    yaxis: {
      automargin: true
    }
  }
};

The Plotly JSON itself does calculate the correct layout height (for example, around 1650px for 150 rows). But as you can see in the screenshot I’m sharing below, the Retool component still compresses the heatmap into the fixed component height that’s set in the canvas:

Screen Shot 2025-11-17 at 3.46.56 PM
Screen Shot 2025-11-17 at 3.46.56 PM2564Ă—860 212 KB

So the heatmap logic is correct — the limitation is simply that Retool’s visual editor does not yet allow dynamic component resizing based on Plotly’s layout.height.

If Retool eventually adds an “Auto height” or “Expand to content” setting for Plotly charts, this approach will start working immediately. But as of today, the component height must still be set manually in the inspector.

Happy to help!

5

Hi all, I agree that it would be preferable to have some kind of dynamic height functionality, whether it be autosizing, expanding to fit content, or a programmatic height option. I went ahead and created a feature request for this and will update this thread when there's new info!

1 Like