Chart Element

Last Update: March 11, 2024

The Chart Element allows you to plot data in a number of different ways, displaying as a awesome looking chart. 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, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

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

How To Use The Chart Element

To start with this Element, just add it to your desired Column. 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.

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 are happy with the final result after you have entered your data, click Save.

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

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Chart. 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.

Chart Data

HeadingDescription
Chart TypeSelect chart type.
TitleThe chart title utilizes all the H4 typography settings in except for top and bottom margins.
Chart DataClick to open up the modal to enter your chart data.

Chart Options

HeadingDescription
Chart Background ColorControls the background of the chart.
MarginEnter values including any valid CSS unit, ex: 4%.
Point SizeChoose point size for line charts.
Legend PositionSet chart legend position. Note that on mobile devices legend will be positioned below the chart when left or right position is used.
X Axis LabelSet X axis label.
Y Axis LabelSet Y axis label.
Show TooltipsChoose 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 TypeSelect border type.
Chart FillChoose how line chart should be filled.
Point StyleChoose point style for line charts.
Point Background ColorChoose point background color for line charts.
Point Border ColorChoose point border color for line charts.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Datapoint Options

HeadingDescription
LabelAdd a label for the data point.
ValueEnter the value for the data point
Background ColorControls the background color.
Border ColorControls the border color.
Legend Value Text ColorControls the color of the text in the chart legend.