Back to contents

JetElements Pie Chart widget. How to display your statistical data with a chart

This tutorial aims to show how to display your statistical data with a JetElements Pie Chart widget as well as its customization for Elementor editor.

Everyone who owns a business might need to showcase statistics data on his website. It can witness to the growth of your company and therefore increase the trustworthiness. Pie Chart is a perfect match to showcase your company’s achievements.

Pie Chart widget

How to create a chart

Step 1 – Open your website with Elementor page builder, then drag and drop the Pie Chart widget in the working area.

Pie Chart widget

Step 2 – First of all, you have to fill the chart with the needed data. To add more data click the Add Item button.

Chart data settings in Pie Chart widget

Step 3 – Give a new item a name in the Label area and set its Value in the corresponding field.

Step 4 – Define the color you want this item to be displayed within the Color option.

Step 5 – As soon as you have added all the needed information, proceed to the Chart Title field and type in the title of this particular chart so that people know what it represents.

Settings in Pie Chart widget

Step 6 – Move on to the Title HTML Tag and select a tag in the drop-down list.

Step 7 – The Title Position drop-down allows you to choose whether you want the title to be displayed above or below the chart.

Step 8 – Open the Content > Settings accordion block and define the size of your chart. Move the slider right or left so that the diameter of the chart increases or decreases respectively.

Settings in Pie Chart widget

Step 9Tip: If you want your pie chart to become a doughnut chart, go to the Cutout Percentage option and move the slider to the right.

Step 10 – To adjust the animation go to the Duration option and define how fast the animation will appear. The further to the right you place a slider, the slower the animation becomes.

Animations settings in Pie Chart widget

Step 11 – Navigate to the Easing drop down where you can select the animation effect which will be applied to the chart.

Step 12 – Go on to the Animation Scale option and toggle it to Yes if you want your pie chart to scale the chart from the center outward.

Step 13 – Let’s have a look at the Legend block. Toggle the Display option to yes if you want the legend to be showcased.

Legend settings in Pie Chart widget

Step 14 – Define the legend’s position in the Position drop-down list. It can be placed at the top, at the bottom, on the right or on the left of the chart.

Step 15 – In case you want the legend to be shown in the reverse order, enable the Reverse option.

Step 16 – At the very bottom, you can find the Tooltip block, where you enable the tooltips which appear once you hover over the chart.

Tooltips settings in Pie Chart widget

Step 17 – It’s time to style the chart up. Open the Style tab where you can utilize all the available options to make the chart stylish and trendy.

Style settings in Pie Chart widget

So now you have mastered the Pie Chart widget and can easily create one on our website.