Pie and Doughnut Chart Widget in Elementor

Do you want to add an attractive and functional Pie and Doughnut Chart Widget to your WordPress website using Elementor? But don’t know the process of using it? Don’t worry! We are here to help you.

In this article, we will teach you Step by step process of using the Pie and Doughnut Chart widget in Elementor.

What is Pie and Doughnut Chart?

A Pie Chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportions. Each slice represents a category and the size of the slice is proportional to the quantity it represents.

A Doughnut Chart is similar to a Pie Chart, but with a hole in the center. It also illustrates numerical proportions, with each slice representing a category, and the size of the slice being proportional to the quantity it represents. Both pie and doughnut charts are useful for showing the relationship between parts and a whole.

What is the Importance of Pie and Doughnut Chart?

Pie and doughnut charts are important because they provide a simple and visually appealing way to represent data and the proportions of the categories. They are particularly useful in the following scenarios:

  1. Comparison of parts: Pie and doughnut charts can be used to compare the relative proportions of different categories in a data set.
  2. Displaying proportions: They can be used to display the proportion of each category in relation to the whole.
  3. Simple data representation: These charts provide a simple and straightforward way to represent data, making it easy for people to understand the information.
  4. Making data more engaging: These charts can help make data more engaging and appealing, which can encourage people to pay attention to the information.

Overall, Pie and Doughnut Charts can be an effective tool for summarizing and communicating data in a simple, intuitive, and visually appealing way.

If you want to add a User-Friendly, Easy to Use, and Reliable Pie and Doughnut Chart Widget then the Pie and Doughnut Chart widget of Sky Addons is the best solution for you. It has lots of cool features which will help you to present your data effectively and make it easier for viewers to comprehend.

So first, we are showing you a short summary of using the Pie and Doughnut Chart widget provided by Sky Addons.

To use the Pie and Doughnut Chart in Elementor, follow these steps:

  1. Install and activate the Sky Addons plugin on your WordPress website.
  2. In Elementor, create a new page or edit an existing one.
  3. Click on the “Add Widget” button and search for “Sky Addons Pie and Doughnut Chart”.
  4. Once you have added the widget to the page, you can customize the chart by changing its data, labels, colors, and other settings.
  5. Preview the chart to make sure it meets your requirements.
  6. Once you are satisfied with the chart, save the page and publish it.

Now let’s jump into learning the detailed process of using the Pie and Doughnut Chart widget.

To Insert Widget

Firstly go to your Elementor Editor and find the Pie and Doughnut Chart Widget of Sky Addons from the Widget Panel and then simply drag and drop it into the selected section.

how to use pie and doughnut chart

Content Tab

Now click on the Content tab. This tab consists of three sections. They are Pie Area Chart, Additional, and Animation.

how to use pie and doughnut chart in wordpress

Pie Area Chart

The First section is the Pie Area Chart section. Here you can adjust the Chart Height and select the Chart type between Pie and Doughnut.

You may add as many as Items you want to add just by clicking on the Add Item Button.

how to use pie and doughnut chart in elementor

When you will click on any Item, there you will find Content and Style options. The Content option allows you to add the Label Text and Data.

how to use pie and doughnut chart in websites

On the other hand, here the Style option allows you to Change the Background Color, Background Hover Color, Border Color, and the Hover Border Color.

pie and doughnut chart for wordpress


Now the next section is the Additional section.

From here you can enable/disable the Show Tooltip and Show Title option.

At the bottom of this section, you will find an option named Legend. For those who are not familiar with the term called Legend, we will describe first what is Legend in a Chart.

Legend: A Legend in a chart is a visual element that explains what each color or pattern in the chart represents.

It is typically located outside of the main chart area and maps the elements in the chart (such as bars, lines, or markers) to a corresponding description or label. The legend can be used to distinguish between different data series, variables, or categories in the chart. It helps to provide clarity and context to the chart, making it easier for the viewer to understand and interpret the data.

Here you may enable/disable the Show Legend option and Change the Legend’s position. You can also Reverse the Legend just by enabling the Reverse option.

pie and doughnut chart for elementor


In the Animation section, you can select the Animation Type. You can choose from Linear, Ease in Cubic, Ease in Cric, and Ease in Bounce options.

You may also adjust the Animation Duration according to your choice.

pie and doughnut chart for websites

Style Tab

Now we move to the Style tab. Here you will find all the styling options. This Style tab consists of 4 sections. They are Chart, Legend, and Tooltip.

pie and doughnut chart widget for wordpress


Firstly in the Chart section, you will be able to adjust the Padding and Bar Border Width.

pie and doughnut chart widget for elementor


In the Legend section. Here you are allowed to change the Legend’s Text Color, Box-Height, Bar-Width, etc.

best pie and doughnut chart for elementor


The last section is the Tooltip section. In this section, you may set the Alignment of the Tooltip. You can Style the Tooltip by changing the Color, Typography & other aspects as per your needs.

responsive pie and doughnut chart for elementor

Finally, we are done with the tutorial. We hope you have understood the process of using the Pie and Doughnut Chart widget of Sky Addons in Elementor.

If you have any questions or queries regarding this please feel free to contact our website – https://techfyd.com/support/
and don’t forget to visit our demo website – https://demo.skyaddons.com/elementor-pie-and-doughnut-chart-widget/

Free Resources. Now & Forever

We believe creating beautiful websites should not be expensive. That’s why TechFyd provides free products for everyone.
Get started for free and extend with affordable packages.
Scroll to Top