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

In the following tutorial, you’ll learn how to create an elegant pie chart.

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.

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.

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

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

Step 4 – Define the colour you want this item to be displayed with in 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.

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.

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.

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.

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.

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.

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