---
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
lang: en
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)?

## 

- Utilizes the Chart widget from The Plus Addons for Elementor to create pie and doughnut charts.
- Requires installation and activation of The Plus Addons for Elementor to access the Chart widget features.
- Allows customization of chart labels, dataset values, background colors, and border colors using pipe-separated values.

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/)