Chart Element

The Chart Element is an elegant, powerful and beautiful tool that allows you to publish gorgeous charts right onto the page using Fusion Builder. With extremely simple to navigate branding options for colors, labels and positioning, the Chart Element brings form and function together beautifully.

Bar Chart

Doughnut Chart

Line Chart

7 Different Chart Types

The Chart Element brings to you 7 different ways to display your numerical data, each one as impressive as the next, and each one suiting several or different types of design and layout. Which you use and how you use them is completely up to you, as we have included extensive styling options for each chart.

Bar Chart

The classic bar chart, only with deep customization options for backgrounds, accents, colors and borders. You can control exactly how you want it to look.

Doughnut Chart

The Doughnut Chart can look as traditional or as modern as you like, with customization options, border and color options and the ability to enable and disable axis labels.

Line Chart

The Line chart is the most customizable of all of the charts in the Charts Element for Fusion Builder. With extensive style and display options you have the ultimate in data versatility at your fingertips.

Polar Area Chart

Our Polar Area chart is quite an obscure one, but still has several use cases. It again, has extensive customization options to give you the ability to control its look and feel.

Horizontal Bar Chart

A slightly different take on the traditional Bar chart is the Horizontal Bar Chart. This Chart includes all of the customization options of the regular Bar Chart so you don’t miss out on styling it as you like.

Radar Chart

Another obscure but sometimes required chart type we offer is the Radar chart type. Perfect for displaying a vast visual differentiation between data, with all of the usual customization options.

Pie Chart

And last but certainly not least, the traditional Pie Chart. This chart also comes along with all of the good customization options of the other charts, still allowing you full style flexibility.

Automatic Chart Sizing

Each and every chart will automatically resize and scale to suit you and your design. Do you want to display 1, 2 or 3 charts side by side for comparison? The Chart Element allows you the freedom to do that and much much more.

Intelligent Tooltips

The Charts Element gives you the ability to have intelligent tooltips switched on or off on your charts. This means you can display them as part of an online report, or have them show key data on the hover of the mouse. Whenever tooltip is turned on, it will use the key data from the chart section (dependant upon the chart type) to display it at the mouse cursor point.

Fully Customizable Styling

Don’t worry about how the chart will integrate by appearance with your websites. We offer full color customization for charts, border size and color options , to ensure that however you’d like to design your chart, it’s more than possible.

Chart Backgrounds & Accents

We’ve created a way for you to set a chart up on its OWN background to further help you brand it accordingly! Not only the chart background, but the axis label colors and the grid line colors can be changed to suit your chart, page design or even your entire brand.

Bar Chart

Doughnut Chart

Line Chart

Extensive Line Chart Options

If your chart of choice is the Line chart, we have included several extensive styling options for you to utilise. These include the size of the pointers on your chart, their color and border color as well as their shape. This is one of our more customizable chart options and for good reason, as it’s one of the more complex charts to choose from.

  • Border Type

    Select the type of border your line chart should have.

  • Chart Fill

    Choose how your chart should be filled

  • Point Style

    Choose the style of your charts point marker

  • Point Size

    Choose the size of your charts point marker

  • Point Background Color

    Set the pointer background color

  • Point Border Color

    Set the pointer border color

Our Charts are Legend-ary!

Charts are sometimes nothing without a Legend to explain the data points and visual stats. We give you the flexibility to choose where on your chart your Legend displays. Top, Right, Bottom, Left or off, just incase your chart doesn’t need an explainer!

Bar Chart

Doughnut Chart

Doughnut Chart

Bar Chart

As much data as you like

Do you have to show off a TON of data? No worries, we got your back! We let you add as many data columns and rows as you need, and label them accordingly. There’s no need to feel held back when visually displaying boring statistics any more, at least, not with the Fusion Builder Chart Element!

Global Theme Options

The Chart Element also comes with a whole host of global theme options that you can find in Avada. This will allow you to set complete global options and styles throughout your website for the charts you use. These, as always, aren’t rigid and overrides within the Chart Element itself can be set to alter these options.

  • Legend Position

    Choose the default setting for all of your charts Legend position. This can be overwritten individually in the options for the chart if required.

  • Show Tooltip

    Sometimes tooltips are relevant, sometimes they’re not, but we feel that giving you a global yes/no setting for them is best practise. This setting can be overwritten in each chart individually.

Chart Data Backend Interface

We have provided an intuitive, smart and easy way to input, amend and manipulate your chart Data in the Fusion-Builder backend. From this window you can edit the charts data values and style options as well as add padding, backgrounds and more.

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Show on Desktop

Only Show on Tablet

Only Show on Mobile

Complete Set of Options

Every option and description included with the chart shortcode is listed below.

  • title – The title of your chart, will be displayed above the data and legend.

  • chart_type – This option sets the type of chart you’d like, for example chart_type=”line” would produce a line chart.

  • chart_legend_position – Sets the position of the chart legend. For example chart_legend_position=”top” will display the legend at the top of the chart.

  • x_axis_label – Sets the value for the x-axis label.

  • y_axis_label – Sets the value for the y-axis label.

  • show_tooltips – Sets whether tooltips are displayed or not, for example: show_tooltips=”yes”, will display chart tooltips.

  • chart_border_type – Specific option for Line Charts. Sets the type of border the chart has, for example: chart_border_type=”smooth” sets a smooth border.

  • chart_point_style – Specific option for Line Charts. Sets the style of point the chart has. For example: chart_point_style=”circle” uses a circle shape as a point.

  • chart_point_size – Specific option for Line Charts. Sets the size of point the chart has

  • chart_point_bg_color – Specific option for Line Charts. Sets the background color of the chart point.

  • chart_point_border_color – Specific option for Line Charts. Sets the border color of the chart point.

  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.

  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

  • chart_bg_color – Sets the background colour of your chart.

  • padding_top – Sets the padding at the top of your chart.

  • padding_right – Sets the padding to the right of your chart.

  • padding_bottom – Sets the padding to the bottom of your chart.

  • padding_left – Sets the padding to the left of your chart.

  • chart_axis_text_color – Accepts a hexcode ( #000000 ). Sets the color of your charts axis text.

  • chart_gridline_color – Accepts a hexcode ( #000000 ). Sets the color of your charts gridlines.

  • x_axis_labels – Sets the labels for your x-axis data values.

  • legend_text_colors – Accepts a hexcode ( #000000 ). Sets the color for the chart legend text.

  • bg_colors – Accepts a hexcodes ( #000000|#000000 ). Sets the background colors for the chart data value.

  • border_colors – Accepts a hexcodes ( #000000|#000000 ). Sets the border colors for the chart data value.

  • chart_border_size – Sets the border size for the chart.

  • legend_label_color – Sets the color for the legend label on your chart.

  • title (fusion_chart_dataset) – Sets the title for the dataset.

  • legend_text_color (fusion_chart_dataset) – Accepts a hexcode ( #000000 ). Sets the color for the legend text on a chart dataset.

  • background_color (fusion_chart_dataset) – Accepts a hexcode ( #000000 ). Sets the background color for a dataset.

  • border_color (fusion_chart_dataset) – Accepts a hexcode ( #000000 ). Sets the border color for a dataset.

  • values (fusion_chart_dataset) – Sets the values for a dataset.

Join The 500,000+ Satisfied Avada Users!