How to embed two visualizations next to each other

If you'd like to add two visualizations next to each other, you'll need to tweak the embed code a little bit. This tutorial will explain how.

Looking for a more general instruction on how to embed a Flourish visualization? Head over to our tutorial on that here.

1

Create your two (or more) charts in Flourish, publish them and copy the embed code. You don't have to change the size of your charts before copying the embed code. Here's what your embed codes should roughly look like:

<div class="flourish-embed flourish-chart" data-src="visualisation/1654479?70747" data-url="https://flo.uri.sh/visualisation/1654479/embed" aria-label=""><script src="https://public.flourish.studio/resources/embed.js"></script></div>
		

2

Add the following parameters to your embed code, inside the first <div> tag:

style="width:48%; display: inline-block; vertical-align: top;"
		

Your embed code should now look like this:

<div class="flourish-embed flourish-chart" data-src="visualisation/1654479" data-url="https://flo.uri.sh/visualisation/1654479/embed" style="width:48%; display: inline-block; vertical-align: top; aria-label=""><script src="https://public.flourish.studio/resources/embed.js"></script></div>
		

3

If you were to publish your page now, your embed would display at about half-width of the container it is in. Now, all we need to do is add the second embed code and repeat the above steps. Here's what this will look like once done:

<div class="flourish-embed flourish-chart" data-src="visualisation/1654479" data-url="https://flo.uri.sh/visualisation/1654479/embed" style="width:48%; display: inline-block; vertical-align: top; aria-label=""><script src="https://public.flourish.studio/resources/embed.js"></script></div>

<div class="flourish-embed flourish-chart" data-src="visualisation/1654499" data-url="https://flo.uri.sh/visualisation/1654499/embed" style="width:48%; display: inline-block; vertical-align: top; aria-label=""><script src="https://public.flourish.studio/resources/embed.js"></script></div>
		

4

You can add two more visualizations with the same embed codes to create a grid of four visualizations, or tweak the percentage in the embed code to accomodate even more than two visualizations in one line.