Chart Element

17/10/2019

Introduced in Avada 5.5, the Chart Element is a new addition to the Fusion Builder Elements toolkit. There are different chart types to utilize such as Bar, Horizontal Bar, Line, Pie, Doughnut, Radar, or Polar Area. Some usage examples include line graphs that of data can be used to compare changes over the same period of time for more than one group. Pie charts are for when you are trying to compare parts of a whole, they do not show changes over time. Bar graphs are used to compare data between different groups or to track changes over a certain time frame. Read on to discover more about this amazing element.

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

Horizontal Bar Chart

Pie Chart

Doughnut Chart

Polar Chart

Line Chart

Radar Chart

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

How To Use The Chart Element

The Chart Element is the most versatile way to add charts anywhere on your site.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Chart’ element and click it to bring up its options window.

Step 4 – Charts can be simple, and they can be very complex. The Chart options are broken up into two sections to make the process as easy as possible. The first section is called Chart Options. Here you configure the chart by giving it a title, choosing the chart type, the labels on the X and Y axes, as well as border, fill and other styling options.

Step 5 – Once you have finished configuring the chart, you need to populate it. This happens in the Chart Data section. Here you can add Value Columns and Data Sets to build your chart. Once you have entered your data, click Save to return to the edit page. Preview the page to see the chart, and remember, you can always return to edit the element to fine tune its appearance or to add more data.

Please read below for details on the specific options the Chart Element has.

Element Options

There are two tabs in the Chart Element namely Chart Options and Chart Data. Please continue reading below to know more about each option. A chart can take on a variety of forms, with common features that provide the chart with its ability to extract meaning from data.

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Chart Element section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

IMPORTANT NOTE
If you are using a Bar or Horizontal Bar Chart, the table interface and available options will change depending on the number of datasets added. This setup is needed in order to ensure maximum flexibility for your chart styling.

Chart Options Tab

  • Title – Controls the chart title. This utilizes all the H4 typography settings in Theme Options except for top and bottom margins.

  • Chart Type – Controls the chart type to be used. Choose between Bar, Horizontal Bar, Line, Pie, Doughnut, Radar, or Polar Area.

  • Legend Position – Controls the chart legend position.

  • X Axis label – Controls the X axis label.

  • Y Axis label – Controls the Y axis label.

  • Show Tooltips – Controls whether tooltips should be displayed on hover. If your chart is in a column and the column has a hover type or link, tooltips are disabled.

  • Border Type – Controls the border type for line charts. Choose between Smooth, Non smooth, or Stepped. This option is only available for Line chart type.

  • Chart Fill – Controls how line chart should be filled. Choose between Start, End, or Origin. This option is only available for Line chart type.

  • Point Style – Controls the point style for line charts. Choose between Circle, Cross, Cross Rotated, Dash, Line, Rectangle, Rectangle Rounded, Rectangle Rotated, Star, or Triangle. This option is only available for Line chart type.

  • Point Size – Controls the point size for line charts. This option is only available for Line chart type.

  • Point Background Color – Controls the point background color for line charts. This option is only available for Line chart type.

  • Point Border Color – Controls the point border color for line charts. This option is only available for Line chart type.

  • Element Visibility – Choose to show the element on the selected visibility options and hide them on the deselected ones. Choose from Small Screen, Medium Screen, and Large Screen. You can select more than one setting.

  • CSS Class – Allows you to add a class to the wrapping HTML element.

  • CSS ID – Allows you to add an id to the wrapping HTML element.

View The Options Screen

Chart Data Tab

  • Table Area – This table allows you to add data sets and value columns, and set the values for the columns, border size, legend label, legend value text color, background color, border color, and X Axis labels.

  • Chart Background Color – Controls the background color of the chart.

  • Chart Padding Options – Controls the top, right, bottom, and left padding of the chart.

  • Chart Axis Text Color – Controls the text color of the x-axis and y-axis.

  • Chart Gridline Color – Controls the color of the chart background grid lines and values.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Chart Element. 

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Legend Position – Set chart legend position. Choose between Top, Right, Bottom, Left, or Off.  Note that on mobile devices legend will be positioned below the chart when left or right position is used.

  • Show Tooltips – Choose whether tooltips should be displayed on hover. Select between Yes, or No. If your chart is in a column and the column has a hover type or link, tooltips are disabled.

  • Chart Background Color – Controls the background of the chart.

  • Chart Axis Text Color – Controls the text color of the x-axis and y-axis.

  • Chart Gridline Color – Controls the color of the chart background grid lines and values.

View The Options Screen

Chart Element Parameters

Copy to Clipboard

Parent Settings

    • title – Insert text that will be displayed as title for the chart. The chart title utilizes all the H4 typography settings in Theme Options except for top and bottom margins.
    • chart_type – Choose from bar, horizontalBar, line, pie, doughnut, radar, or polarArea. Sets the chart type to be used.
    • chart_legend_position – Choose from top, right, bottom, left, or off. Sets the chart legend position.
    • x_axis_label – Insert custom text for X axis label.
    • y_axis_label – Insert custom text for Y axis label.
    • show_tooltips – Choose from default, yes, or no. Set whether tooltips should be displayed on hover. If your chart is in a column and the column has a hover type or link, tooltips are disabled.
    • chart_border_type – Choose from smooth, non_smooth, or stepped. Sets the border type for line charts.
    • chart_fill – Choose from start, end, origin, or off. Sets how line chart should be filled.
    • chart_point_style – Choose from circle, cross, crossRot, dash, line, rect, rectRounded, star, or triangle. Sets the point style for line charts.
    • chart_point_size – Accepts a numeric value from 0 to 20. For example, 3. Sets the point size for line charts.
    • chart_point_bg_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the point background color for line charts.
    • chart_point_border_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the point border color for line charts.
    • chart_bg_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background of the chart.
    • padding_top – Accepts a pixel value. For example, 5px. Sets the top padding of the chart.
    • padding_right – Accepts a pixel value. For example, 5px. Sets the right padding of the chart.
    • padding_bottom – Accepts a pixel value. For example, 5px. Sets the bottom padding of the chart.
    • padding_left – Accepts a pixel value. For example, 5px. Sets the left padding of the chart.
    • chart_axis_text_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the text color of the x-axis and y-axis.
    • chart_gridline_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of the chart background grid lines and values.
    • x_axis_labels – Insert text for the data set. If multiple values, separate them by using | as delimiter. For example, Val 1|Val 2|Val 3. Sets the x-axis labels.
    • legend_text_colors – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). If multiple data sets, separate the values by using | as delimiter. For example, #ffffff|#ffffff|#ffffff. Sets the legend text color.
    • bg_colors – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). If multiple data sets, separate the values by using | as delimiter. For example, #00bcd4|#8bc34a|#ff9800. Sets the background color of the legend and chart values.
    • border_colors – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). If multiple data sets, separate the values by using | as delimiter. For example, #00bcd4|#8bc34a|#ff9800. Sets the border color of the chart values.
    • chart_border_size – Accepts a numerical value. For example, 4. Sets the border size of the chart values.
    • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

    • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

    Child Settings

      • title – Insert text that will be displayed as title for the data set.
      • legend_text_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the legend text color.
      • background_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color of the chart values and the legend.
      • border_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the border color of the chart values.
      • values – Insert values for the data set. If multiple values, separate them by using | as delimiter. For example, 5|10|15.