Chart

In this article you will find the unique information about Chart shortcode. If you want to learn about some more general issues like using a shortcode etc. See the list bellow or browse the general section.

Examples Of Use

You can see a beautiful use of Charts on one of our pre-made templates: Duku, Kiwi, Purple, Yew.

Detailed shortcode description

Bellow you will find a table with all of the shortcodes features and fields. On the right you will find a description for each field/section. All of this settings are available in shortcodes popup, it will be displayed once you create a new shortcode or hit the edit (pencil icon) button.

GeneralDescriptionChartExtrasAnimations

Option	Description
Main Preset	Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More »
Value	Choose chart fill value. From 0% as empty chart to 100% as closed circle.
Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Padding	It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Margin	It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Custom Class	Add your custom class to the element. Mostly used for custom CSS/JS.

Option	Description
Title	Check to disable title.
Title – Typography	Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Title	Define title.
Title – Margin	It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Description	Check to disable description.
Description – Typography	Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Description	Define content. Thanks to default WordPress WYSIWYG editor you can easily format the content.
Description – Margin	It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »

Option	Description
Width	Define chart circle width. You can create two types of charts: Donut: if the width value is smaller then radius; Pie: if the width and radius values are the same.
Radius	Define chart circle radius.
Foreground	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Icon	Check to disable icon.
Icon	Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Value	Check to disable value.
Value – Typography	Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Display Value	Define displayed value. When you want to display value different then Value field (0-100).
Unit	Define value unit. You can specify a custom unit displayed after the Value number (e.g. %).

Option	Description
Marker	Check to disable marker. This will disable marker at the end of your chart progress circle.
Marker – Radius	Define marker circle radius.
Marker – Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Marker – Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
First Circle	Check to disable first circle. This will disable first circle background around chart value. You can create a multi-layered charts.
First Circle – Radius	Define first circle radius.
First Circle – Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
First Circle – Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Second Circle	Check to disable second circle. This will disable second circle background around chart value. You can create a multi-layered charts.
Second Circle – Radius	Define second circle radius.
Second Circle – Background	Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Second Circle – Border	In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »

Option	Description
Enter Animation	Enter Animation allow to specify an appear effect for shortcode. Learn More »
Loop Animation	Loop Animation is enabled only for selected shortcodes/elements. This animation will be played in an endless loop. Learn More »