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 therefore recommended.  

Adding an Infogram Component

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

• Embed Code: Enter the embed code provided by Infogram here. You can learn more on this topic here.
• 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 any time 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 being viewed upon. This is an optimised responsive embed code and is the recommended option for most use cases. 
  • Responsive: The embedded project will adjust to its container and adapt to the screen size your publication is viewed upon.
  • 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. The defaults are mobile, tablet and desktop.

To embed an Infogram graphic on your website or blog, you can follow Infogram's own guide here: