How to embed a Flourish chart at a custom width

To embed your Flourish chart at a custom width, you can supply the width of the visualization in the export settings. The width specified here refers to the container the visualization is in. This container will be filled at 100% if nothing further is specified. Here's an example of a visualization embedded with a width of 50%:

This tutorial explains how to embed a chart at a custom width. If you don't know how to embed a Flourish visualization in your website, follow our guide here.

To embed your visualization at a custom width, follow the steps below.

1
Create your visualization in Flourish and publish it using the "Export & publish" button in the top-right corner



2
Once your visualization has been published, click on "More options"

3
Set your width to be 50% using the "Width" specification



4
Copy your embed code to embed it in your website. Here's what the embed code for the above example looks like:

<div class="flourish-embed flourish-sankey" data-src="visualisation/1630295" data-url="https://flo.uri.sh/visualisation/1630295/embed" aria-label="" data-width="50%"><script src="https://public.flourish.studio/resources/embed.js"></script></div>	

You might notice it has a parameter for "data-width", which it didn't have before. Make sure your embed code has the "data-width" added. If it doesn't, your visualization will display at full width.
5
Embed your visualization in your website.
If you don't know how to embed your visualization in your website, follow our guide here.