Infogram Component

The Infogram component allows you to embed your own Infogram charts and visualisations into an article.  While infogram embeds can also be added via the custom code component, using the dedicated infogram component offers several advantages and is recommended.  

Once dropped on the canvas, select an Infogram component to expose the available properties:

Embed Code

This is where you enter the embed code provided by Infogram ( learn more)

Embed Type

Infogram supports three different embed types.  When the embed code is entered, Canvasflow will automatically detect and set the appropriate embed type. This can be changed at anytime by selecting a different embed option. 

  • Responsive (Async): The embedded project will adjust to its container and will adapt to the screen size your project is viewed on. This is an optimised responsive embed code version.  This is the recommended option. 
  • Responsive: The embedded project will adjust to its container and will adapt to the screen size your project is viewed on.
  • Fixed: The embed size will be fixed. Note that your project size may vary across platforms. With this code, the embed size will not adapt to its container.

Set Max Width

By default, an embedded Infogram will automatically adjust to fit the available container width.  Enabling the ' Set Max Width' option allows you to control the maximum width of the infogram component. 

Display On Device

The 'Display' On option allows you to choose which devices the component will be displayed on, by default it will be displayed on mobile, tablet and desktop

Note:

All Infogram components are centered automatically

Still need help? Contact Us Contact Us