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.

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 widgets panel.

After placing the widget 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.

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.

2. Style

The Style tab is used for customising the appearance of all the Pie Chart components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. 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

Color

A color picker to assign suitable color to the icon.

Icon Size

Set size of icon from here.

3. Advanced

Advanced Tab Options are common across all the widgets. 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?