How to embed charts side by side using the Table template

If you want to embed multiple Flourish visualizations side by side or on top of each other but aren't able to edit the embed codes that are added to your CMS, you can use our Table template to achieve this.

Take a look at the visualization below. These are three slope charts displaying side by side in a table:

You can also use this workaround to embed completely different chart types next to each other. Here's an example of a line chart embedded next to a map:

To create a visualization like this, follow these steps:

1

Once you've built all the visualizations you want to embed, you will need to export them as an iframe embed. Pay attention to the dimensions of the chart and edit them accordingly. In our slope chart example, each slope has a width of 30% and a height of 700 pixels.




2

Create a new table visualization and, in the Data tab, paste the embed codes for your charts in separate cells. Paste them in separate columns to get a side-by-side view or in different rows for a stacked view. You can add column headers that work as titles for each of your charts, or text below every one of them if you want.




3

Edit the styling options of the tables to remove the lines and separators for a seamless view. Under the Cell styles settings set the border thickness to be 0.




4

Disable the search functionality.

That's it! With this trick, you can now create custom grids of charts and show multiple visualizations within a single view.