---
title: "How to Create a Pie Chart in Elementor (Doughnut Chart)?"
url: https://theplusaddons.com/docs/pie-chart-in-elementor/
date: 2024-02-05
modified: 2026-04-11
author: "Aditya Sharma"
description: "Do you want to add a pie chart to an Elementor website? Pie charts are a powerful tool for visualizing data and presenting complex information in a clear and concise..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-a-Pie-Chart-in-Elementor-Doughnut-Chart_-1024x536.jpg
word_count: 373
---

# How to Create a Pie Chart in Elementor (Doughnut Chart)?

## Key Takeaways

- The Plus Addons for Elementor Chart widget allows users to create pie and doughnut charts on their Elementor website.
- Users must add chart labels and dataset values separated by a pipe sign (|) in the Label Value and Dataset tabs, respectively.
- Customization options include changing individual dataset background and border colors using color hex codes separated by a pipe sign (|).

Do you want to add a pie chart to an Elementor website? Pie charts are a powerful tool for visualizing data and presenting complex information in a clear and concise manner.

With the Chart widget from The Plus Addons for Elementor, you can easily show your data in a pie or doughnut chart on your Elementor website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Chart widget, [click here.](https://theplusaddons.com/docs/chart-widget-settings-overview/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-advanced-charts/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Chart widget to the page and follow the steps - 

1. You can select **Custom **from the **Chart** **Type **dropdown under the **Layout **tab.

2. You have to select **Doughnut & Pie** from the **Select Chart** section under the **Chart** tab.

3. Then from the **Orientation** dropdown, select **Pie**.

> *Note: You can also select Doughnut to make a doughnut chart.*

4. After that, in the **Label Value** field, you have to add chart labels separated by a pipe sign (**|**).

![](https://theplusaddons.com/wp-content/uploads/2024/02/tpae-chart-type-doughnut-pie.gif)

5. Then, in the **Dataset** tab, you have to add the data for the chart.

- **Data** - Here, you have to add the values of the dataset separated by a pipe sign (**|**). Make sure to add the same number of data points as added in the **Label Values** field of the Chart tab.

- **Background Colors** - Here, you can change the individual dataset background color. To do so, you have to add the color hex codes separated by a pipe sign (**|**). Make sure to add the same number of colors as added in the **Data** field.

- **Border Colors** - Here, you can change the individual dataset border color. To do so, you have to add the color hex codes separated by a pipe sign (**|**). Make sure to add the same number of colors as added in the **Data** field.

> *Note: For the Doughnut option, you’ll find these options inside individual item tabs.*

You can customize the chart further from the **Special Option** and **Extra Option** tabs.

Now you should have a beautiful pie chart.

![Pie chart demo](https://theplusaddons.com/wp-content/uploads/2024/02/pie-chart-demo.gif)

Suggested Read: [How to create a bubble chart in Elementor](https://theplusaddons.com/docs//bubble-chart-in-elementor/)

## Frequently Asked Questions

**Q: What should I do if my pie chart isn't displaying correctly in Elementor?**
A: If your pie chart isn't displaying correctly, check that the data points in the Dataset tab match the number of labels in the Label Value field. Each dataset value should correspond to a label, and they must be separated by a pipe sign (|). If there's a mismatch, the chart may not render properly.

**Q: What are the best practices for labeling data in a pie chart?**
A: When labeling data in a pie chart, ensure that labels are concise and clearly represent the data they correspond to. Use the Label Value field to input labels separated by a pipe sign (|). This helps maintain clarity and prevents confusion when viewers interpret the chart.

**Q: Are there any limitations when using the Chart widget in Elementor?**
A: One limitation is that the Chart widget from The Plus Addons for Elementor only works with Elementor and is not compatible with other page builders like Gutenberg, Beaver Builder, or Divi. This means you need to ensure Elementor is installed and activated to use this feature.