Introduced back in Avada 5.5, the Chart Element is a new addition to the Avada 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, and watch the video for a visual overview.,View Element Demo Page!,Overview
Chart Types
How To Use The ElementElement OptionsGlobal Options,Chart TypesThe 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 ElementThe Chart Element is the most versatile way to add charts anywhere on your site.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Alert from the Elements List.
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 are happy with the final result after your have entered your data, click Save.
Please read below for details on the specific options the Chart Element has.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsThere 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 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.
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 ScreenChart 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 ScreenGlobal OptionsLocation: Avada > Theme Options > Avada Builder Elements > Chart.
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