Working with the data elements

Data elements give you the option to visually represent data 📊. These include a counter element that counts up to a specified value, a bar element that progresses to a given value, and a circle element in the form of a donut chart

In this article

• Using data elements
• The progress bar and circle element
• The counter element
• Styling data elements
• Compatible with PDF

Using data elements

You can find the data elements at the bottom of the elements tab.

Drag the element into a column on the page. Once placed, the canvas will show the default settings, which you can easily adjust within the element settings.

The progress bar and circle element

The progress bar and circle elements help visualize progress. You can add multiple bars to your block and style them individually.

The bar and circle elements include an animation effect that counts up to their configured values. To visualize this progress optimally, you can style the following options:

Data value

• Add max value to indicate the maximum value on your data element. You can add up to 2 decimal places.

• Add the shown value to represent the current progress. You can add up to 2 decimal places.
• Toggle on the thousands separator to add punctuation (e.g., 1,000 vs 1000).

• Enter a prefix to indicate what kind of data is displayed (for instance, $). This is optional.
• Enter a suffix to indicate what kind of data is displayed (for instance, %). This is optional.
• Add an aria-label so when a screen read encounters this data element, the aria label informs the visitor what kind of data it is. This is optional.

Styling of the Bar or Circle

• Customize the colors for the max and shown value
• For progress bar elements, adjust the corners to rounded or square
• For circle elements, adjust the size of the circle
• Adjust the weight. This changes the thickness of the bar or circle

Background

• Set the background color

Spacing/Alignment

• Set how much spacing there should be on the bottom of your bar or circle
• For circle elements, set the alignment to left, center, or right

Animation

• Set the entrance animation and duration

Example of a circle data element:

Counter element

The counter element works similarly to the progress bar and circle, allowing you to visualize numerical data with an animated count-up effect.

General settings

• Add the value. This is the final number that will be shown. You can add up to 2 decimal places.
• Toggle on the thousands separator to add punctuation (e.g., 1,000 vs 1000).

• Enter a prefix to indicate what kind of data is displayed (for instance, $). This is optional.
• Enter a suffix to indicate what kind of data is displayed (for instance, %). This is optional.

Background

• Set the background color

Spacing

• Set how much spacing there should be on the bottom of your counter

Animation

• Set the entrance animation and duration

Styling data elements

In your Brand Kit or Doc brand settings, you can set the styling for data elements. When you've set these up, you ensure the data elements you add are automatically on-brand.

 

Compatible with PDF

Data elements are fully compatible with the Export to PDF feature. Your Foleon Doc will show all data elements with their configured values in the exported PDF.

Related articles

• Working with elements
• All about hotspots
• All about forms