A message or data that is conveyed via a visual medium tends to have a better engagement. It’s a common thing to see data conveyed via a visual form such as a pie chart. In WordPress, you can create a beautiful pie chart with JetElements.
What is JetEements?
It’s an Elementor add-on. Elementor itself is a page builder plugin for WordPress that you can use to create a beautiful webpage without having to deal with CSS code. Elementor is a freemium plugin. You can use the free version to create a pie chart like we want to show in this article. However, you need to spend $17 to buy the JetElements add-on since it is a paid add-on. In addition to creating a beautiful pie chart, you can also use JetElements to create other beautiful content such as timeline (be it horizontal or vertical), progress bar, Instagram gallery, and so on.
How to create a pie chart with JetElements
Before getting started, make sure you have installed Elementor and JetElements on your WordPress site.
Once Elementor and JetElements are installed, create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button.
You will be taken to the Elementor editor. The first thing you need to do here is adding a new section. Click the plus button to do so. You can select any structure. We use the single-column structure in this example.
Add the Pie Chart widget by dragging it from the left panel.
As you can see, you will instantly have a pie chart. By default, your pie chart consists of three datasets. To add a new dataset, you can simply click the ADD ITEM button. To edit the content of each dataset, simply click the dataset you want to edit the content of. You can edit the label, color, and value.
To change the chart title as well as the position, you can go to the next section beneath the ADD ITEM button.
Customizing your pie chart
The Pie Chart widget of JetElements comes with lots of setting options. Once you are done with the datasets, you can start customizing the look of your pie chart. You can play around with the left panel to customize your pie chart. Here are some common settings you might want to make.
- Set the chart size
To set the chart size, you can open the Settings option under the Content tab. You can set the chart size on the Chart Height option.
Beneath the Chart Height option, you can set the cutout height. It is the percentage of the chart that is cut out of the middle. You can have a doughnut chart by setting the cutout percentage to a bigger number.
- Set the border width
Border width is the separator between the datasets. The larger the border width, the smaller your datasets will be. To set the border width, you can switch to the Style tab. Set the border width on the Border Width option. You can also set the border color by clicking the color selector.
- Set the legend position
Legend is the additional description about your pie chart. In legend, you can set what color represents a dataset. To set the legend, you can switch back to the Content tab. Legend is displayed by default. You can hide it by sliding the button on the Display option. To set the position, you can simply select one from the dropdown menu.
To set the box width on the legend, you can switch to the Style tab and open the Legend option. Box width can be set on the Box With option.
You can play around with the left panel to customize your pie chart. Once you are done, you can click the PUBLISH button on the bottom side to publish your page. Or, you can also save your page as a template. To save your page as a template, click the arrow icon next to the PUBLISH button and select Save as Template.
How to add your pie chart on a blog post
You might want to add the pie chart you have just created to a blog post or a regular page in WordPress. To do so, you need to save the pie chart as a template instead of publishing it.
Before being able to add your pie chart to a blog post, you need to install the Elementor Blocks for Gutenberg plugin. This plugin allows you to use an Elementor template as a Gutenberg block. Once the plugin is installed, create a new blog post (Posts -> Add New). Add a new block by clicking the plus button and select Elementor Library.
Select a template you want to add (pie chart in this case).
