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 #

Installez le plugin GutenKit et accédez au tableau de bord de WordPress. Ensuite, créez une nouvelle page ou un nouvel article et suivez les étapes ci-dessous :

• Activer l'éditeur de blocs.
• Trouvez le "+” en haut de l’écran de l’éditeur.
• En cliquant dessus, une bibliothèque de blocs s'affichera.
• Search for the GutenKit Donut Progress Bar block.
• Une fois que vous le voyez, cliquez ou faites-le glisser et déposez-le sur l'écran de l'éditeur.

Step 2: Add Pie Chart Number and Icon #

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

Contenu:

• Style de diagramme circulaire: Choose to display your pie chart style with or without text.
• Contenu du graphique: Show the percentage or icon for the chart content.
  • Pourcentage: Enter the percentage number in this box.
  • Icône: Add an icon or image from the library or upload it from your device.
• Style de contenu: 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:

• Alignement du contenu: 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:

• Couleur: Add color to the title or description text.
• Typographie: Use this setting area to customize the title or description text. As like chagrin font, weight, style, etc.
• Marge: 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.

C'est ça!
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.