GutenKit Donut Progress Bar Block lets you easily give an appealing look to your data on your WordPress website using the default block editor. You can choose to display a number, icon, image, and supporting content, and also customize the pie chart with extensive styling options.

Let’s learn how to add the pie chart block from the Gutenberg editor area.

Step 1: Add GutenKit Donut Progress Bar Block #

Zainstaluj wtyczkę GutenKit i przejdź do pulpitu WordPress. Następnie utwórz nową stronę lub post i wykonaj poniższe kroki:

• Włącz edytor bloków.
• Znaleźć "+” ikonę u góry ekranu edytora.
• Kliknięcie spowoduje wyświetlenie biblioteki bloków.
• Search for the GutenKit Donut Progress Bar block.
• Po wyświetleniu pliku kliknij go lub przeciągnij i upuść na ekranie edytora.

Step 2: Add Pie Chart Number and Icon #

Now, open the block setting and step up to the content tab.

Treść:

• Styl wykresu kołowego: Choose to display your pie chart style with or without text.
• Zawartość wykresu: Show the percentage or icon for the chart content.
  • Odsetek: Enter the percentage number in this box.
  • Ikona: Add an icon or image from the library or upload it from your device.
• Styl treści: Apart from the default style, you can add a slide animation effect on the hover state.

Step 3: Style Donut Progress Bar  #

In this step, we’ll move to the Style Tab to customize the pie chart section. Let’s see how it functions:

Content Wrapper:

• Wyrównanie treści: Define the horizontal positioning of the pie chart. (Left, Center, Right)

If you choose the second pie chart style, you will see the Title & Content setting in the Style tab. Also, both features have the same settings.

Title & Content:

• Kolor: Add color to the title or description text.
• Typografia: Use this setting area to customize the title or description text. As like chagrin font, weight, style, etc.
• Margines: Enter a value to add margin.
  • Title Margin: Define the gap between the pie chart and the title.
  • Content Margin: From there specify the gap between title and content.

Chart:

• Pie Chart Size: Use the slider to determine the size of the pie chart.
• Border Line Style: Choose a style for the border line. (Butt, Round, Square)
• Border Size: Define the thickness of the border using the slider.
• Pie Chart Image Size: Determine the size of the image. (This setting appears only if the image is selected in the content tab)
• Track Color: Use the slider to add a color to the pie chart track.
• Bar Color: Give color to the pie chart slice.
• Number Color: Give color to the percentage number using the color picker.

Otóż to!
We have covered all the details on how to use GutenKit Pie Chart block on your Gutenberg website.

Hopefully, now you can add a pie chart to your Gutenberg website.