The Pie Chart widget for Elementor makes it simple to visualize data in a sleek and engaging way. Whether you’re showcasing statistics, survey results, or business insights, this widget helps you present information with clarity. With customizable colors, labels, and animations, you can tailor the chart to match your brand and design effortlessly.
Let’s look at each of the options in the Pie Chart widget for Elementor below.
Add a Pie Chart Widget to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Pie Chart”
- Hover over the widget in the search results and click install
- Add the “Pie Chart” widget to any Elementor Page
General Settings
Show Title
Enable or disable the display of the chart title.
Title
Type the text for the chart title.
Show Legend
Show or hide the chart legend, which provides a visual reference for the categories or data points represented in the pie chart. When enabled, the legend typically appears alongside the chart, showing labels and corresponding colors for each slice.
Tooltip Trigger
Choose when tooltips should appear.
- No Tooltip
- On Hover
- On Click
Item Color Type
Select how colors are assigned to chart items.
- Random Colors
- Custom Colors
3D
When enabled, the chart appears with depth and perspective, giving it a 3D look instead of a flat, 2D representation.
Pie Hole
Adjust the hole size in the center of the pie chart (for a donut chart effect).
Interactive
Enable or disable interactivity for the chart.
Slice Text
Select what text appears on the slices.
- Percentage
- Label
- Value
Start Angle
Set the starting rotation angle of the pie chart.
Slice Visibility Threshold
Hide slices smaller than a specified percentage.
Slice Border Color
Choose a color for the border around pie slices.
Reverse
Reverse the order of the slices in the pie chart.
Items Settings
Manage the social share buttons using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set the label or name for the data segment in the pie chart.
Value
Define the numerical value assigned to this segment, determining its proportional size in the chart.
Color
Choose a custom color for this segment. If no color is selected, the default or randomly assigned color will be used.
Pie Chart Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
General Styling
Set the width, height, alignment and area of chart.
Title Styling
Set the font, size, and color of title.
Content Texts Styling
You can set the font family and font size of content texts.
Legend Styling
Set the legend alignment, positioning, font family, font size and color.
Tooltip Styling
Here, you can set the background color, font family, font size, and color of tooltip.
Pie Chart Design Examples For Elementor
Here are the live use cases for the Pie Chart Widget.
Pie chart for age group data.
Pie Chart for website traffic data with 3D effect.
We hope this guide helped you explore the powerful features of the Pie Chart Widget. With its customizable design, smooth animations, and interactive elements, you can present data in a visually appealing way. If you have any questions or need further assistance, feel free to reach out. Happy designing!
