Data is always more interesting when it is conveyed in a graphic instead of text. In addition to easier to understand, data in a visual form is also easier to remember. Pie chart is one of the visual forms that you can use to convey data. It is especially great if you have no skill to create an infographic or other graphic forms. If you want to create a pie chart on your WordPress site to display certain data, there are at least two ways to do so.

First, you can use Google Sheets. This online spreadsheet software has a feature that you can use to create a number of chart types, including pie chart. You can then publish the pie chart you have created on the web. Alternatively, you can use a plugin such as JetElements.

Here are two ways to create a pie chart in WordPress. Not just a passive pie chart in a PNG or PDF format. The chart will be interactive where when you hover your mouse over a slice within the chart, the data will show up.

1. Create a pie chart in WordPress using Google Sheets

To create a pie chart using Google Sheets, first enter the data you want to turn it into a pie chart. Here is an example.

Highlight the data and click the chart icon on the toolbar or go to Insert -> Chart. Your data will immediately turn into a pie chart.

Turn the chart into an editing mode (by clicking it) and click the three-dot icon on the top-right corner and select Publish chart.

On the appearing popup, go to the Embed tab and click the Publish button. Copy the embed code.

Now login to your WordPress dashboard and create a new post or edit an existing one. Add a new block and select Custom HTML and paste the embed code you have just copied. Click the Preview button on the Custom HTML block to preview your chart.

You can customize your pie chart to meet your taste and make it looks more interesting. No need to re-embed the chart. Every time you make a new change on your chart on Google Sheets, the change will also be applied to the chart on your website or anywhere it is embedded to.

You can read this article to learn more about how to customize the pie chart in Google Sheets.

2. Create a pie chart in WordPress using JetElements

Another method you can use to create an interactive pie chart in WordPress is by using JetElements.

JetElements itself is a paid plugin that costs $19 per year. It depends on Elementor to work so you need to install both JetElements and Elementor to create a pie chart in your WordPress site. You can also get JetElements with a one-time purchase option on the Jupiter X theme bundle and Monstroid2 theme bundle.

Creating a pie chart using JetElements is more recommended if you want to create a landing page using Elementor although you can also insert the pie chart into a regular blog post.

Assuming you have installed both Elementor and JetElements, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor.

Add a new section by clicking the red plus button on the canvas area and drag the Pie Chart widget to the section.

The pie chart will be created immediately as you drop the Pie Chart widget to the canvas area. The pie chart consists of 3 slices by default. You can edit each slice by clicking it on the left panel. you set the label of the slice, color, and value. To add a new slice, click the ADD ITEM button.

You can open the Settings block to set the chart height, cutout percentage, animation effect, and legend position.

To style the chart, you can go to the Style tab. On the Chart block, you can set the border width and the border color. On the Title block, you can set the typography of the chart title (font size, font style, font family), text color, and margin. On the Legend block, you can set the box width, the typography of the legend, and the text color. On the Tooltips block, you can set the typography of the tooltips and the text color.

Once you are done editing the chart, click the PUBLISH button on the bottom side on the left panel to publish your page.

Inserting the pie chart into a blog post

You might want to insert the pie chart you have just created with JetElements to a blog post. To do so, you need the help of the Elementor Blocks for Gutenberg plugin. This plugin will convert an Elementor template into a Gutenberg block.

Once you are done creating the pie chart with JetElements above, you can click the tiny arrow icon next to the PUBLISH button on the left panel. Select Save as Template.

Give your template a name and click the SAVE button.

Create a new blog post or edit an existing one. Add a new block and select Elementor Library and select the pie chart template you have just created (Make sure the Elementor Blocks for Gutenberg plugin has been installed and activated).

You can see the example here.