How to set custom height to self-hosted visualizations

Please note that HTML download is a premium feature available to our Business and Enterprise users only. For more information on Flourish plans, see our pricing page.

Sometimes, self-hosted visualizations can get cropped when embedded: 

Fortunately, you can easily fix this! Learn how below.

1
Position your embed code in a parent div tag and set a fixed height.
<div class="visualization" style="height: 800px;">

2
Within the parent div tag, add your embed code and make sure that you have a data-height="100%" added to the element.

3
The visualization will now adopt the full height of the parent element:

Related Articles