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.
Displaying the Chart Shortcode
To add the shortcode:
Configuring the Chart Settings
There are general settings that allow you to configure the chart shortcode to your needs.
We’ll describe them below:
| Setting | Description |
|---|---|
| Percent | Shows 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.
| Setting | Description |
|---|---|
| Percentage | Percentage value is shown inside the chart. |
| Icon | Shows 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 Text | Shows any text you entered in Custom Text field. |
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:
| Setting | Description |
|---|---|
| Bar Color | Sets the color of the circular bar. |
| Track Color | Sets the color of the track for the bar. |
| Line Width | Sets the thickness of the circle bar. |
| Bar Size | Sets the Diameter of the circle bar. |
| Description Text Size | Sets 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.
