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.  

Adding an Infogram Components

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

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