Pie chart shortcode

Displays a pie chart element to your web page. Frontend Builder allows you to customize your pie charts to great extent. You can separately set the width and size of the charts , as well as the color of every individual element.

Examples of the pie chart shortcode usage

We tried to cover all the basic and
advanced uses for the pie chart shortcode

A couple of examples of pie chart variants in two columns.

A couple of pie chart contextual usage examples.

Mark Vaughan

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.nnPellentesque fringilla, nulla in convallis blandit, nibh libero sagittis odio, lobortis imperdiet purus sapien et nisl. Donec tempor sed elit ac tempus. Suspendisse ullamcorper mollis aliquam. Aenean vel nunc sed dui ultricies consectetur vel in arcu. Nullam at magna viverra, euismod sapien non, hendrerit dui. Donec tempor sed elit ac tempus.

Mellifluous Lagniappe

Fusce egestas est enim, at rhoncus diam aliquet vel. Mauris ornare placerat urna eget consectetur. Integer id sapien nec magna commodo molestie. Sed ut urna eleifend, tincidunt nisi eu, tincidunt purus.nn Pellentesque congue scelerisque lorem vitae volutpat. Sed imperdiet at erat quis tristique. Donec tincidunt arcu quis velit ultrices, ac bibendum metus tincidunt. Ut consectetur ipsum ut quam dictum, sit amet aliquam felis rutrum. Proin in lectus sit amet magna porta molestie. Duis faucibus interdum iaculis. Nullam ac purus ut diam bibendum posuere. Mauris et tristique metus.

Basic settings for pie chart shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Item aligment

Set the alligment of the chart - left, right, or center.


Defines the total radius of the pie chart.

Split line color

You can define a custom color to the line separating the chart sections.

Legend position

This option sets the position of the legend, relative to the chart. It can be set to left, right, or bottom.

Chart description

You can add a description of the chart here. It will show on the legend area of the graph, mark by the appropriate color.

Mid cut

Sets the radius of the inner cutout circle. This value is displayed in percentages.

Split line width

Sets the width of the line separating chart sections. Displayed in pixels.

Legend text color and size

You can set a custom color and size to the legend text.

Chart value

This option defines the value of each individual chart section. It does not represent an absolute value. Instead, it defines the ratio of the section in proportion to other sections.

Chart color

You can set a custom color for each individual chart. It will automatically be applied to the border, if enabled, and the corresponding legend element.

Advanced settings for graph shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode


You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group