If you want to embed multiple Flourish visualizations side by side or on top of each other, but you 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 achieve this, follow these steps:
- 1
-
Once you've created 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 - you may need to change the width and/or height. In our slope chart example, each chart has 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.
- 3
-
Edit the styling options of the tables to remove the lines and separators for a seamless view. Under the Table cell styles settings set the border thickness to 0.
- Moreover, you can define how much space each column should take through the Column width options.
- 4
-
Disable the search functionality.
-
NOTE: If you download the table as an image, it would not capture the two charts in it as they are Flourish embeds, so screenshot the table instead.
That's it! With this trick, you can now create custom grids of charts and show multiple visualizations within a single view.