Pie & Doughnut Chart
Turn numbers into a bar chart people understand at a glance.
Pie, doughnut and gauge charts: a live doughnut centre, labels with leader lines, rounded and pulled-out slices, several rings from CSV, Other grouping and legends with values.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Pie & Doughnut Chart. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Data
| Setting | What you can set |
|---|
| Chart Type | Pie or Doughnut |
| Data Source | Enter here, CSV — paste or CSV — file or URL |
| Slices | each item: Data, Label, Value, Pull Out (px), Link, Colours, Colour, Gradient To or Hover Colour |
| Data Name | Used in tooltips and the data table. |
| CSV | First row: a heading for the labels, then one name per value column. Each value column becomes a ring (the first is the outer ring). |
| CSV File or URL | A .csv from the media library, a published Google Sheet (CSV) or any public CSV. Fetched on the server and cached. |
| Refresh Every (minutes) | Number |
| Separator | Detect, Comma, Semicolon, Tab or Pipe |
| Slice Colours | Colours for the rows, in order, separated by commas. |
| Order | As entered, Largest first or Smallest first |
| Group Slices Under (%) | Slices smaller than this share are combined into one. Empty = keep every slice. |
| Grouped Slice Label | Text |
| Grouped Slice Colour | Colour |
Shape
| Setting | What you can set |
|---|
| Chart Size | 100–900 · Height of the drawing area; the circle fits inside it. |
| Hole Size (%) | 10–95 |
| Arc | Full circle, Half (gauge) or Custom angle |
| Arc Length (°) | 30–360 |
| Start Angle (°) | -180–180 · 0 = the first slice starts at the top. |
| Counter-clockwise | On / off |
Doughnut Centre
| Setting | What you can set |
|---|
| Show | Nothing, The total, The first slice’s share or My own text |
| Big Text | Text |
| Small Text | Text |
| Follow the Hovered Slice | While a slice is hovered or focused the centre shows its value and label. |
| Hovered Slice Shows | Value or Percentage |
Slice Labels
| Setting | What you can set |
|---|
| Text on Slices | None, Percentage, Value, Label, Label + percentage or Label + value |
| Position | Inside the slice or Outside, with a leader line |
| Hide Below (%) | Slices smaller than this get no label, so tiny slices stay clean. |
| Setting | What you can set |
|---|
| Show Title | On / off |
| Title | Text |
| Subtitle | Text |
| Title HTML Tag | H2, H3, H4, H5, H6, div or p |
| Title Alignment | Start, Center or End |
| Show Legend | On / off |
| Legend Position | Top, Bottom, Left or Right |
| Legend Alignment | Start, Center or End |
| Legend Marker | Circle, Box, Rounded box or Line |
| Legend Shows | Labels only, Label + value, Label + percentage or Label + value + percentage |
| Table Layout | Values line up in a column at the end of each row. |
| Reverse Order | On / off |
| Click to Hide a Slice | On / off |
| Show Tooltips | On / off |
| Tooltip Shows | Value, Percentage or Value and percentage |
Numbers & Accessibility
| Setting | What you can set |
|---|
| Prefix | Text |
| Suffix | Text |
| Decimals | Number |
| Percentage Decimals | Number |
| Thousands Separators | On / off |
| Short Numbers (12K, 3.4M) | On / off |
| Caption | Text |
| Chart Description | Read by screen readers. Defaults to the title and slices. |
| Data Table for Screen Readers | On / off |
Animation
| Setting | What you can set |
|---|
| Play | When scrolled into view, On page load or No animation |
| Effect | Sweep round, Grow from the centre or Sweep and grow |
| Duration (ms) | Number |
| Easing | Linear, Ease out, Ease in and out, Overshoot, Elastic or Bounce |
| Count Up the Centre | On / off |
Style tab: design controls for Box, Slices, Doughnut Centre, Slice Labels, Title, Legend or Tooltip — colours, typography, spacing, borders and hover states.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
- Works well with: Advanced Data Table, Advanced Tabs, Bar Chart.
