Graph shortcode

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

Examples of the graph shortcode usage

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

Single column graph with multiple charts.

A couple of examples of graph variants in two columns.

A full width graph with multiple curved line charts.

Basic settings for graph 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.

Legend position

Sets the position of the graph legend to left, right, or the bottom of the graph.

Text Color and size

This option defines the color and size of legend text.

Graph text color

Sets the color of text on the graph.

Chart values

This option simultaneously defines the graph section numerical values, and sets the values for corresponding charts. Values are defined left to right, comma separated. Graph will automatically adjust to the highest value.

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.

Height and width

You can manually adjust the height and width of the graph element. In case that the width surpasses the width of the column it's nested in, it will automatically adjust to appropriate size.

Legend shape

You can customize the shape of legend marker. It can be set to circle, square, or radial square.

Graph Style

You can customize the appearance of the graph using this option. There are two main variants - bar and line, and a couple of variations for each, denoted as Fill, Curve and Stroke.

Chart labels

This option defines graph sections for each individual chart, and the graph as a whole. They can be set left to right, by comma separated values.

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.

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