Add a horizontal progress bar to an insight

Learn how to add a horizontal bar to your insights to visualize information efficiently.

Neli Ivanova avatar
Written by Neli Ivanova
Updated over a week ago

The gtmhub-bar component allows you to display simple progress.

The size attributes is the current share of the metric, while the highest attribute is used to visually represent the current progress relative to a number.

The fraction-size attribute is optional and defines number of decimal places to round the progress percentage to.

For example:

<div class="title">Email campaigns performance</div>
<gtmhub-bar size="20" highest="50" count="100" fraction-size="1"></gtmhub-bar>

will visualize:

Add a horizontal progress bar to an insight

As you are creating an insight:

  • click on the HTML Snippets button at the bottom left corner

  • hover over Simple progress bar

  • click Insert snippet

  • edit as needed

Did this answer your question?