The chart shortcode displays a circle chart for showing progress or other stats. It allows you to display a percentage of the progress inside the chart, icon or custom text.

In this article, we explain how to configure the chart shortcode.

To see the chart shortcode in action, check out the demo page.

Chart shortcode - demo


Displaying the Chart Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

Chart shortcode - visual composer screen

3In the Add Element pop-up screen, search for Chart and click on it to be added to the page.

Chart shortcode - add element

4When the shortcode is added, a new pop-up screen called Chart Settings will open that allows you to configure the shortcode settings.

Chart shortcode - Chart settings

5Click on Save Changes and publish or update the page to check the result.

Configuring the Chart Settings

There are general settings that allow you to configure the chart shortcode to your needs.

We’ll describe them below:

SettingDescription

PercentShows the progress of any action or a stat in percentage. Enter any numeric value.
Description Adds a description text below the chart.

Configuring the Chart Content

The setting Content Inside the Chart allows to choose the type of content inside the circle bar. It is percent by default meaning that your percentage will be showed up inside circle. There are other options you can select.

SettingDescription

Percentage Percentage value is shown inside the chart.
IconShows icon inside the chart. Add the icon class name that you want to have in the shortcode. Where to find icon class name you can refer to the article Jupiter Control Panel. Scroll down to the paragraph Icon Library.
Custom TextShows any text you entered in Custom Text field.

Chart shortcode - Chart content

Configuring the Chart Styling

In order you want to change color of circular bar or description text and other styling, you can edit the following options described below:

SettingDescription

Bar ColorSets the color of the circular bar.
Track Color Sets the color of the track for the bar.
Line WidthSets the thickness of the circle bar.
Bar SizeSets the Diameter of the circle bar.
Description Text SizeSets the size of the description text under the chart.
Description Text Color Sets the color of the description text under the chart.

Adding an Entrance Animation

The Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read the Configuring shortcode’s entrance animation article for further explanation.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.