1. Home
  2. Docs
  3. Happy Elementor Addons Pro
  4. Premium Widgets
  5. Pie & Doughnut

Pie & Doughnut

Happy Elementor Addons Pro has introduced a new widget Pie & Doughnut chart. You can show all your stats of your website in a more stylish and smart way. It has some exclusive features that will help you make extraordinary designs for your charts.

Using the Pie & Doughnut chart widget

Step 1:

Select the Pie & Doughnut chart widget from the menu bar on the left-hand side of the screen then drag and drop it in the selected area.

Drag and Drop Widget

Step 2:

In the ‘Content‘ section, you will find options to edit ‘Pie Chart‘, ‘Settings‘, ‘Wrapper Link‘.

Content Section

In the Pie Chart section, you can select two types of charts, Pie Chart

Pie Chart

Or you can choose the Doughnut Chart.

Doughnut chart

Now, you can Add Items as many as you like. In the content section, you can give a name to the label and add Data. Remember, the amount of space the item will take in the chart depends on the data.

Pie chart Content

In the style section, you can add background color and background hover color.

pie chart style

In the Settings section, you can determine chart heights, enable tooltip, legend. Also, you can add animation to the chart.

Settings section

Step 3:

In the ‘Style‘ section, you will have options to design ‘ Common,’ Legend’, and ‘ Tooltip’.

Style Section

In the Common section, you can add padding, border size, border color, border hover color.

common section

You can set box width and typography in the Legend section.

Legend section

In the Tooltip section, you can set padding, border width, radius, caret size. Also, you can select mode, background color, border color, title, and body typography.

Tooltip section

Step 4:

If you want to add motion effects, happy effectsbackground or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor. Give a read to this Document to know more about Advanced features and its uses.

Advanced section

Lastly, you will see a beautiful Pie or Doughnut chart widget on your website.


That’s it!

Was this article helpful to you? Yes No

How can we help?