Pie & Doughnut Chart

How to use Pie & Doughnut Chart Widget of Sky Addons for Elementor

The Pie & Doughnut Chart widget is a visual data tool that helps you represent parts of a whole in a clean, colorful, and interactive way. Built using the powerful Chart.js library and fully integrated into Elementor, it allows you to create both pie and doughnut style charts with complete styling flexibility. Whether you want to display survey results, user distribution, or resource usage, this widget is perfect for simplifying complex data into digestible visual chunks, all without writing a single line of code.

Features:

1. Choose between Pie or Doughnut chart types
2. Add multiple data sets with individual color control
3. Interactive hover effects with tooltips
4. Customizable labels, borders, and background
5. Built-in animation support for engaging user experience
6. Full customization using Elementor’s live editor

Insert Pie & Doughnut Widget

1. Open Elementor Editor. In the Elementor panel, search for “Pie / Doughnut” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Chart Layout

1. Chart Height – Define the height of the chart in pixels.
2. Type: Choose between Pie or Doughnut layout.
3. Slices – There is no separate label list. Each repeater item is one slice, and its Label names the slice in the legend and tooltip.
4. Add Repeater (Dataset) – Add one item per slice, with the following:
   • Label – Name of the slice.
   • Data – The value of the slice, as one number.
   • Background Color – Color of the slice.
   • Background Hover Color – Color on hover.
   • Border Color – Border color of the slice.
   • Hover Border Color – Border color on hover.
   • Hover Offset – How far the slice moves out on hover (0 to 20, default 4).

The first chart in the Pie & Doughnut Chart demo is 450 px tall with the Pie type and five slices: Red, Green, Yellow, Grey and Blue.

Switch Type to Doughnut and the same slices form a ring.

Additional Settings

1. Show Tooltips – Enable data tooltips on hover.
2. Show Title – Display a chart title.

Legend Settings

1. Show Legend – Toggle the legend display.
2. Position – Select position: Top, Bottom, Left, or Right.
3. Reverse – Reverse the order of legend items.

Animation Settings

1. Select Animation – Choose animation style.
2. Duration – Set animation duration in milliseconds.

Style Customization

Chart Section

Customize the main chart area to align with your website’s layout and design.

1. Padding – Adjust space around the chart to prevent overflow or tight layout.
2. Bar Border Width – Define the thickness of the data line.

Legend Section

Style the legend that displays dataset labels for better readability and aesthetics.

1. Text Color – Modify the color of the legend text to enhance visibility.
2. Box Height / Width – Adjust the size of the colored legend markers beside each label.
3. Typography – Fully control font family, size, weight, spacing, and style of legend text.

Tooltip Section

1. Alignment – Set how tooltip content aligns inside the box (left/center/right).
2. Padding – Add inner spacing so the content doesn’t feel cramped.
3. Background Color – Set a custom background to match or contrast your site.
4. Border Color / Width / Radius – Fine-tune the outline of the tooltip box.
5. Caret Size – Adjust the size of the little arrow pointing to the bar.
6. Title Color / Typography – Style the heading inside the tooltip.
7. Title Bottom Spacing – Add space between the title and body.
8. Body Color / Typography – Control the appearance of the detailed info shown in the tooltip.

Save and Preview

1. Once you’ve customized and styled your chart, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. If chart doesn’t display: ensure label values and datasets match in count.
2. Check console for Chart.js related errors.
3. Make sure there are no conflicting scripts or caching issues.

Conclusion

The Pie & Doughnut Chart widget is an essential tool for anyone looking to display data visually and meaningfully. With customizable slices, responsive layout, and interactive elements, it fits perfectly on business, educational, or analytical websites. Use Elementor’s live editor to tweak every aspect and get the exact design you want, effortlessly. Perfect for making stats beautiful and engaging!

Need help? Our team is happy to answer questions on the Sky Addons support page.