Xpro Elementor Addons Pro

⌘K
  2. Home
  4. Xpro Elementor Addons Pro
  6. Widgets
  8. Pie & Donut Chart

Pie & Donut Chart

Introduction

The Pie & Donut Chart widget for Elementor by Xpro is a powerful tool designed to transform complex numerical data into visually engaging and easy-to-understand charts. Instead of presenting readers with long, dry tables of statistics, you can use these charts to highlight key information such as market share, budget distribution, or project progress in an attractive, compact format. This widget is lightweight and highly customizable, ensuring your data stories are both beautiful and high-performing.

How to Install Elementor Pie & Donut Chart Widget

Requirement

To use this widget, you must install and activate the Pro version of Xpro Elementor Addons. Once the plugin is active, ensure the Pie & Donut Chart Widget is ‘Enabled’ in your settings to find it within the Elementor editor.

Step 1

Access the Xpro Addons menu from your WordPress Dashboard.

Step 2

Navigate to the Widgets Tab, locate the Pie Chart widget, and toggle the button to ON.

How to Use Pie & Donut Chart Widget

Data visualization should be simple and effective. The Xpro widget allows you to create professional charts without writing a single line of code.

Step 1

Open your page in the Elementor Editor and scroll to the Xpro Addons – Pro section.

Step 2

Find the Pie Chart widget and simply drag and drop it onto your desired page location.

Content Tab Configuration

The Content tab is where you define the core structure and data points of your chart.

Chart Data

In this section, you can manage the primary entries for your chart:

  • Chart Type: Choose between a classic Pie chart or a modern Donut style from the dropdown menu.
  • Add Item: Click the + Add Item button to create new segments for your chart.
  • Segment Details: For each item, you can define a Label (e.g., Red, Blue, Yellow) and a corresponding Value (e.g., 300, 50, 100) to represent the data size.

Style each item separately. Adjust Background color, Background hover color, Border color, Border width, Hover offset and Offset pixels.

Chart Settings

Fine-tune the physical dimensions of your visualization:

  • Radius: Use the slider to increase or decrease the overall size of the chart.
  • Arc Spacing (pixels): Define a fixed offset between the arcs to create a “separated” look, which can improve readability.

Animation

Capture your audience’s attention with professional entry effects:

  • Animate Rotation: Toggle this to make the chart spin into view.
  • Animate Scale: Enable this to have the chart scale outwards from the center upon loading.
  • Animation Duration (ms): Set the speed of the animation in milliseconds (e.g., 1000ms for a one-second animation).
  • Animation Easing: Select from various easing styles like Linear, Ease In Out Cubic, or Ease Out Bounce to control the “flow” of the animation.

Style Section

The Style section provides full flexibility over the appearance of your chart to ensure it matches your website’s branding.

Canvas

This section controls the physical area where your chart is rendered.

  • Height & Width: You can use sliders to set the specific height (in pixels) and width (in percentage) of the chart canvas to ensure it fits perfectly within your page layout.

Legend Style

This section provides extensive typography and layout controls for your chart’s legend.

  • Display & Positioning: You can toggle the legend on or off, choose its position (e.g., Bottom), and even reverse the order of items.
  • Visual Styling: It includes settings for Legend Box Width and a full suite of typography options, including Font Family (e.g., Helvetica), Font Size, Weight, Style, and Font Color.

Tooltip Style

This section allows you to customize the look of the information boxes that appear when a user hovers over a chart segment.

  • Visibility & Background: You can enable or disable tooltips and set a custom Background Color.
  • Spacing & Text: It includes a Padding slider to control the internal space of the tooltip box, as well as specific controls for the Tooltip Content Font Size and Color.ize the colors for each segment. You can often apply gradient colors or shadows to make the arcs appear more three-dimensional.
  • Typography: If your chart includes labels or tooltips, you can edit the font, size, and weight of the text to ensure it is legible.

Best Pie & Donut Chart Widget for Elementor

The Xpro Pie & Donut Chart widget is an essential tool for any data-driven website. It allows you to create interactive sections that are perfect for reports, landing pages, and business presentations. With a wide range of responsive design options, your charts will look stunning on any device.

Check out our other creative tools like the Circle Progress Bar or Counter to further enhance your data presentation.

How can we help?