How to Create a Pie Chart in WordPress (Doughnut Chart)?

Key Takeaways

  • Nexter Blocks includes the Advanced Chart block for creating pie and doughnut charts on WordPress websites.
  • Users can customize border colors for datasets in the Advanced Chart block by adding color hex codes separated by a pipe sign.
  • The Advanced Chart block requires installation and activation of Nexter Blocks to function properly.
Table of Contents

Do you want to add a pie chart to your WordPress website? Pie charts are a powerful way to visualize data, making it easier to present complex information in a clear and concise format for your audience.

With the Advanced Chart block from Nexter Blocks, you can easily show your data in a pie or doughnut chart on your WordPress website.

To check the complete feature overview documentation of the Nexter Blocks Advanced Chart block, click here.

Requirement  – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.

To do this, add the Advanced Chart block to the page and follow the steps – 

1. Select Doughnut & Pie from the Style section under the Chart tab.

2. Then, from the Orientation section, select Pie.

Note: You can also select Doughnut to make a doughnut chart.

3. After that, in the Label Values field, you have to add chart labels separated by a pipe sign (|).

4. Then in the Dataset tab, you have to add the data for the chart.

Border Colors – Here, you can change the individual dataset border color. To do so, you have to add the color hex codes separated by a pipe sign (|). Make sure to add the same number of colors as added in the Data field. 

Note: For the Doughnut option, you’ll find these options inside the repeater item tabs.

You can customize the chart further from the Style tab.

Now you should have a beautiful pie chart.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if my pie chart isn't displaying correctly?

If your pie chart isn't displaying correctly, check the data you entered in the Dataset tab. Ensure that the data matches the labels you provided in the Label Values field and that they are separated by a pipe sign (|). Mismatched data and labels can lead to display issues. Additionally, verify that you've selected the correct chart type in the Style section.

What are the best practices for labeling my pie chart data?

For effective labeling in your pie chart, use clear and concise labels that accurately represent the data. In the Label Values field, separate each label with a pipe sign (|). This ensures that your audience can quickly understand the information being presented. Consistent labeling helps maintain clarity and improves the overall effectiveness of your chart.

Are there any limitations when using the Advanced Chart block?

One limitation of the Advanced Chart block is that it requires Nexter Blocks to be installed and activated. Without this, you won't be able to access the chart features. Additionally, ensure that you provide the same number of colors in the Border Colors field as the data points in your chart, as mismatched numbers can cause display issues.

Does the Advanced Chart block support mobile viewing?

The Advanced Chart block is designed to be responsive, meaning it should display correctly on mobile devices. However, always preview your charts on different screen sizes to ensure they maintain clarity and readability. This is crucial for providing a good user experience across all devices.

What happens if I forget to separate my chart labels with a pipe sign?

If you forget to separate your chart labels with a pipe sign (|), the chart may not display correctly, as it won't recognize the individual labels. This can lead to confusion for viewers and misrepresentation of data. Always double-check your entries in the Label Values field to ensure proper formatting.

Last reviewed: April 14, 2026

Related Docs