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.
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:
|Percent||Shows the progress of any action or a statin percentage. Enter any numeric value.|
|Description||Adds a description text below the chart.|
Configuring the Chart Content
The setting Content Inside the Chart allows choosing the type of content inside the circle bar. It is percent by default meaning that your percentage will be showed up inside the circle. There are other options you can select.
|Percentage||Percentage value is shown in the chart.|
|Icon||Shows icon inside the chart. Add the icon class name that you want to have in the shortcode. You can find icon class name in the Ken > Icon Library.|
|Custom Text||Shows any text you entered in Custom Text field.|
Configuring the Chart Styling
In order you want to change the color of a circular bar or description text and another styling, you can edit the following options described below:
|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.|
|Font Size||Sets the size of the description text under the chart.|
|Icon Size||Sets the size of the icon under the chart.|
|Font Weight||Sets the weight of the description text under the chart.|
|Description 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
You can read Adding custom CSS class to a shortcode article for further explanation.