Piechart

< All Topics

Pie charts are an interactive element using which shows data in a circular shape. It is mostly used to show percentage or proportional data in an visual appealing way. The loading animation of these pie chart is beautiful and keeps the audience engaged.

Pro tip
Showcase your achievements or skill level using these percentage pie charts. These animated pie charts will add a creative touch to your website.

How to use the Piechart Widget of The Plus Addons For Elementor

The Piechart widget comes with 3 different styles and a plethora of customization options using which you can create stylish looking charts for your websites.

Table Of Contents

General Steps

Search for the Progress Bar (Pie Chart is a part of this) widget from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Pie chart widget. First, click on the Content tab.

1. Content

Pie Chart

Select Main Style

Select the Pie Chart option from the drop down.

Pie Chart Style

Select any one pie chart style from the drop down.

Pie Chart Round Styles

Select any one pie chart round styles from the drop down.

Title

Add your pie chart title here.

Sub Title

Add your pie chart subtitle here.

Number

Add the number to be displayed inside the piechart here.

Prefix / Postfix Symbol

Add the prefix / postfix here. For eg: Percentage.

Symbol Position

Set the position of your above symbol. You can place it before or after the number.

Icon

Select Icon

You can select an icon or a custom image.

Image Size

Select the size of your image if you decide to use an icon image.

Icon Font

Use any icons from popular font families like FontAwesome or Icons Mind.

Icon Library

Select your icon from the dropdown.

Icon Title Before After

Decide where to place your title. You can place it before or after the title.

2. Style

Pie Chart Setting

Dynamic Value

Set the dynamic value which will highlight that much part of chart.

Pie Chart Circle Size

How big the pie circle you want to set, size in pixels.

Thickness

Thickness or width of the circle’s track.

Pie Empty Color

Set color of the pie chart which is going to left blank or low lighted.

Chart Fill Color

Set color of the pie chart which is going to shown dark or highlighted.

Title Setting

Typography

Assign size, weight, spacing and much more to fonts.

Title Color

A color picker to assign suitable color to the title.

Sub Title Setting

Typography

Assign size, weight, spacing and much more to fonts.

Sub Title Color

A color picker to assign suitable color to the subtitle.

Number Setting

Typography

Assign size, weight, spacing and much more to fonts.

Number Color

A color picker to assign suitable color to the numbers.

Number Prefix / Postfix Style

Typography

Assign size, weight, spacing and much more to fonts.

Number Color

A color picker to assign suitable color to the number pre / postfix.

Icon / Image Setting

Icon Color

A color picker to assign suitable color to the icon.

Icon Size

Manage icon size from here.

On Scroll View Animation / Image Setting

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?