Navigating through the editor

Got an upcoming report to do? Infogram has your back with a brand new and powerful editor to work with. Create not only reports, but also infographics, dashboards and much more.

Start out by choosing a project type. From here you will be taken directly to the editor.

Right sidebar

Once in the editor, here’s how you navigate through it.

Pages

Add a page by clicking the “Add page” button and select a blank canvas or one of the predefined pages.
Delete a page by either using the backspace button on your keyboard or by clicking the bin icon next to the page.


To reuse a page, duplicate it with the “duplicate” button.


Change the order by dragging and dropping them up and down the list.

Settings


Here you can select a different theme – a font, color and other design element combination.

The project template selector will allow to adjust the canvas size at any time. It can be be anything from an A4 page to a Facebook post or a custom size project.

Select a background color using the color picker or by entering a hex color code.

Customize the Share button, available when hovering over your published project in webview. To access webview, click the “Share” button at the top right side of the editor.

“Link charts by dataset names” allows you to link charts with the same tab names and navigate through them simultaneously. Enable this option and click through tabs in one of several charts. The option will work with two and more charts.

“Show as pages” option allows to choose transitions for your pages.

Left sidebar

Use the left sidebar to add objects to your document.


Click on the icons to open and browse chart, map, text element, image and icon (graphics), shape, video and data source libraries. Drag and drop them in the canvas.

Quick settings

Select an object to access a quick menu next, which allows you to : Bring to front, Send to back, Duplicate, Delete the object with a single click.

 

Object settings

These settings will allow you to customize objects to make them look just like you want. Select an object on your editor canvas and use the right side panel settings for customization.

Chart settings

“Edit data” gives you access to the chart’s data table, where you can insert or import your data.
In “Settings” click on “Chart type” to switch to another chart type to see what works better for your data.

You can set up width and height size in pixels to resize the chart. Add a degree of rotation to the object.

Depending on the chart type you’re using, “Chart properties” will allow you to show numeric values, enable the data download option and other qualities.

Open “Color” dropdown to choose the color for each data variable by using the color picker or entering a hex code. You can also enable the “Use one color” option >  select a color > and hit “Apply to all” to use a single color for all data entries.

Name your chart axis, set axis ranges, choose a grid type, axis intervals and other under “Axis and grid” dropdown.
Adjust font size and type in “Font” dropdown.

Enable the legend in “Legend” dropdown.

Display a tooltip when hovering over the chart by enabling the “Show tooltip” option.

Make sure the chart can read your inserted data format, by selecting a comma “,” or dot “.” as a decimal or thousand separator in “Numeric format” dropdown.

Map settings

“Edit data” gives you access to the map’s data table, where you can insert or import your data.

You can set up width and height size in pixels to resize the map. Add a degree of rotation to the object.

“Map properties” allow you to choose the map type, the color mode, as well as options such as displaying the “region names”, “hide blanks” and other qualities.Open “Color” dropdown to choose the color for each data entry, group colors or hot and cold colors, depending on the map type. Use the color picker or enter a specific hex code. The “inactive color” displays regions on map that have been deleted from the map’s data table. “Map region contour” allows you to highlight country or region borders for “Shapes map” type. You can also enable the “Use one color” option >  select a color > and hit “Apply to all” to use a single color for all data entries.

In “+1 value” you can control the range of data visualized in the map, the marker size range, and the number of heatmap entries.
Adjust font size and type in “Font” dropdown.

In “Legend” enable the legend, sorting options and name labels.

The “’tooltip” will allows to display values, group names, if any, and to show the tooltip when hovering over the map.
Make sure the map can read your inserted data format, by selecting a comma “,” or dot “.” as a decimal separator.

Text settings


Resize the text object by entering the size in pixels. Add a degree of rotation to the object.

Adjust the percentage of transparency with the slider.

Choose a font type and size by using dropdown menus.

Click on the color rectangle to choose a color by using the color picker or by entering a hex color code.

Choose the emphasis by bolding, underlining or using italic. Choose alignment .

Use the slider to pick line height in paragraphs. Emphasize a word by changing letter space.

With “List type” you can insert bullet points into your text.

You can add a hyperlink to a selection of words with the “Add link” option.

Add graphics
Image


Use images or icons from the selection by searching a keyword or upload your own JPG, PNG and SVG files.

Use the right side panel to insert width and height size in pixels to resize the object. Add a degree of rotation to the object.


Adjust the percentage of transparency with the slider.

You can choose to display a tooltip when hovering over the object. Insert text of your choice.


Add a link that will allow viewers to click on the image and be redirected to a URL of your choice.

Shapes
Line


Choose a line’s start and end point appearance.

Adjust the percentage of transparency with the slider.

Click on the color rectangle to choose a color by using the color picker or by entering a hex color code.

Adjust the line thickness and appearance.

Rectangle

Use the right side panel to insert width and height size in pixels to resize the object. Add a degree of rotation to the object.

You can adjust corner roundness with the “Corner radius” slider.

Adjust the percentage of transparency with the slider.

Use a color fill or none. Then click on the color rectangle to choose a color by using the color picker or by entering a hex color code.

You can add a border line around the shape, choose its thickness in pixels and the border type.

Output

Downloading a project


Wish to share your report offline with your team or share your post via social media? Download it as a static, standalone image (PNG, JPG) of PDF file.

Paid feature: The option to download is available for users with a Pro subscription or higher. Luckily upgrading (http://infogram.com/pricing) your license type is easy and gives you access to other great features Infogram plans have to offer.   

Click the “Download” button at the top-right side of your editor.

Choose the file format in the header: PNG, JPG or PDF. Note that these are all static files.


Use the panel on the right to select pages you wish to download in one go. It’s easy to leave out pages you do not wish to be part of the file.

Use the right side panel to choose the quality and size of the image file. To increase quality use the “custom” option and insert width of at least 3000 px. Height will adjust automatically. For PDF, use the custom “Document size” option to set the output in millimeters (mm).

If you plan on layering the file on top of another background after download, enable the “Transparent background” option.

Share online

Enter a project title and choose one of the publishing options – “Public on the Web” or “Private” . 

Paid feature: Publish your file privately and your project would not be indexed by search engines. Only viewers you have shared the file with will be able to access this URL link.


You can add a project description that will appear as a caption to the project URL.

Use the URL link to open the project in a new tab on your browser. Share it with people you wish to access and engage with the interactive version of your project.

Use Responsive (Async), Responsive, or WordPress links and copy them into the HTML editor of your Website. Try out which one works with your CMS.

Note : You will need a plugin to be able to embed Infogram content into WordPress. Here you will find more information and guidance on how to download the WordPress plugin for Infogram: https://infogram.com/blog/new-infogram-wordpress-plugin/. The plugin works currently only in self-hosted WordPress sites, where you can install it. It will allow you insert infographics that you have created in the tool directly to your website. Also, here you will be able to find our latest WordPress version: https://wordpress.org/plugins/infogram/ .

If your wish your project to have your website’s background, use the “Transparent background” option. 

“Zero padding embed” will remove any additional padding around your embedded project.