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
Set the alligment of the chart - left, right, or center.
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.
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.
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.
You can customize the shape of legend marker. It can be set to circle, square, or radial square.
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.
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.
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
You can set different bottom margins for different elements / shortcodes
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
All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that
You can manually change the speed of each animation for each element / shortcode
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