Skip to main content
All CollectionsWidgets
Chart widget (PRO)
Chart widget (PRO)
Updated over 7 months ago

With our premium Chart widget, you can place a variety of charts on your page. You can import the data from a CSV file, a URL or add it manually.

Here's everything you need to know about this widget.

Add a Chart widget

Instructions

  1. Click the Add icon in the top right corner (+ icon).

  2. Click to Browse all widgets.

  3. Locate the option Chart. Click it.

  4. Click Add widget.

  5. You'll be asked to add a data source.

  6. Click Done to confirm.

You can add as many Chart widgets to your page as you'd like.

Set data source

Chart_set_data_source.PNG

There are three kinds of data you can display with your Chart widget:

  1. Enter data manually.

    • Add a Label and value.

    • Confirm each line by clicking Enter.

    • This data cannot be changed later on.

  2. Connect a publicly accessible CSV file, for example, a Google Sheets document.

    • Make sure to publish your sheet in the Comma Separated Value format.

    • Use double quotes (") if you want to display values with commas or other special characters.

    • The first line contains column headers.

    • The first column contains labels.

    • The following columns (max. 3) contain numeric data values.

    • CSV files can contain at most 250 rows.

Example CSV data:

Year,Value
2001,500
2020,700
2023,900
2030,1200

Widget menu

Sales_widget_menu.PNG

Right-click the widget or click the More icon (three dots) to open the Widget menu. This is where you control the appearance and behavior of your Chart widget.

These are your options

  • Set data source. A shortcut to setting the data source for your widget.

  • Edit the widget. Change the title. Click Done to stop editing.

  • Refresh the widget, to make sure the data is current.

  • Copy the widget to another page. The original widget will remain on the page.

  • Move the widget to another page. The original widget will be deleted.

  • Display settings:

    • Chart type. Select the Chart type that best matches your data:

      • Area chart: shows up to 3 series in an overlapping (non-stacked) area chart.

      • Line chart: shows up to 3 series as lines.

      • Bar chart: shows up to 3 series as horizontal bars.

      • Column chart: shows up to 3 series as vertical bars.

      • Pie chart: shows one data series as a pie chart.

      • Map chart: shows one data series as a map overlay, showing values per country.

    • The map chart type expects the first column to contain either:

      • Country names in English (e.g., Belgium, Australia, United States);

      • A 2-letter country code (according to ISO 3166-1 alpha 2)
        โ€‹

    • Height: choose between small, medium, large, or extra-large.

    • Display without borders: this is a toggle.

  • Share the widget. Once you tick this option, you can share the widget with a unique link. In this window you'll also see if you've made a live copy of your widget.

  • Change background color and transparency. If you make the widget 100% transparent, you'll only see its content. You can also apply this setting to all other widgets on your page.

  • Delete widget. You'll get a pop-up to confirm. If you continue, the widget will be deleted. There is no way to undo this.

Resources

  • The Chart widget should be able to display any public URL to a CSV file. For more information about the Google Sheets procedure, check their support section. You could also consult this blog post.

  • You'll find the introductory article for this widget on our blog.

Did this answer your question?