Pie Chart

Pie Chart

Pie charts are always in a round shapes, It’s in the name which records the discrete data.

Name was actually derived from a pie which is also comes in same shape and size. Pie charts displays data in percentage. Mostly used in business, economics and mass media, where numbers always works faster than digits.

Pro tip
Do you know pie chart is not a chart, it’s a graph !!!

Configuration for Pie Chart

Pie chart is always eye catching and even kids can understand by it’s simple but attractive UI. Just decide the numbers and you are on.

How to use the Pie Chart Block of The Plus Addons For Gutenberg

The Pie Chart block comes in three styles. You can create a pleasant-looking layout using a customized style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Pie Chart into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Pie Chart after “/” sign, eg.“/Pie Chart”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Layout

Select Layout

We have provided pie chart and progress bar in a single widget, so use pie chart select it in this drop down.

Style

Choose the layout from the list we provide.

Circle Style

Select the circle style from the select box as per your choice.

Content

Title

An input for title text to display with chart.

Sub Title

An input for sub title text to display with chart.

Value

Drop the main value part which denotes the value for chart. Other part will have different design.

Display Number

Number related to value will also be displayed.

Symbol

Symbol display with the number value.

Symbol Position

Display symbol before/ after the number value.

Icon/ Image

Icon Type

Icon type is a selection whether you want an icon or image or nothing.

Icon library and Select Icon

On selection of Icon in previous drop down, you’ll be displayed whole list of icons provided by the FontAwesome icon library. If you have purchased licence for pro plan and activation has been done then you’ll able to use pro icons too.

Upload Image

On selection of Image in previous drop down, you’ll be asked to choose and upload image, and after uploading image basic styling option for image would be displayed there.

Image Size

Set the image size options.

2. Style

The Style tab is used for customizing the appearance of all the Pie Chart components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Pie Chart

Circle Size

Set size of circle from here.

Thickness

Thickness of the track can be set here.

Draw Reverse

Animation will be clockwise instead of default anti-clock direction.

Empty Color

A color picker to assign suitable color to the blank part of the track.

Fill Color

A color picker to assign suitable color to the visible part of the track. Gradient support is also provided.

Title

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the title text.

Sub Title

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the sub title text.

Number

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the number.

Number prefix/ Postfix

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the number prefix/ postfix text.

Icon/ Image

Icon Color

A color picker to assign suitable color to the icon.

Icon Size

Set size of icon from here.

Image Size

Set the size of the image from here.

Image Border Radius

Set the radius curve of the element’s corner.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.