1. Home
  2. Docs
  3. Marketing Elements
  4. Charts

Charts EA Element

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Charts Element

»Content

 

Charts

⇒Layout: Select the chart layout from the list.

 

X-Axis

⇒Show Axis Label: Show or Hide X-Axis Label

⇒Label: Enter the label name for the X-Axis label.

⇒Data Labels: Add the data label here. Enter labels for X-Axis separated with a comma. Click on Dynamic settings to apply the AnalogWP Classes to the content. (Ex. Add a dark background)

⇒Show Grid Lines: Show or Hide X-Axis Grid Lines

⇒Begin at Zero: Start X-Axis Labels at zero

: Set the labels’ rotation.

⇒Column Width: Set the Column Width manually.

 

Y-Axis

⇒Show Axis Label: Show or Hide Y-Axis Label

⇒Label: Enter the label name for the Y-Axis label. Click on Dynamic settings to apply the AnalogWP Classes to the content. (Ex. Add a dark background)

Adding the data

⇒Title: Add the data title here. Click on Dynamic settings to apply the AnalogWP Classes to the content. (Ex. Add a dark background)

⇒Data: Enter Data Numbers for Y-Axis separated with a comma.

⇒URLs: Enter URLs for each Dataset separated with a comma.

: Add a first fill color.

: Add a second fill color.

⇒Fill Colors: Enter Colors separated with a comma, this will work only for pie and doughnut charts.

⇒Border Width: Set the border width for the top, right, bottom and left of the recipe box for different dimensions.

⇒Border Color: Add a custom color to the recipe box border.

⇒Add Item: Use the ‘+Add Item’ button to add more ingredients to the recipe.

⇒Data Type: Select the data type here.

⇒Show Grid Lines: Show or Hide Y-Axis Grid Lines

⇒Begin at Zero: Start Y-Axis Labels at zero

⇒Open Links in a new tab: Select whether you want to open your link in a new tab or not.

⇒Column Width: Set the Column Width manually.

 

Title

: Enable/disable the title of the chart.

: Add the title text here. To decorate the text click on Dynamic settings to apply the AnalogWP Classes to the title. (Ex. Add a dark background)

: Set the Html tag for the title.

: Set the position of the title.

: Set the title alignment.

 

Advanced Settings

: Set Y-Axis minimum value. This will be overridden if the data has a smaller value.

: Set Y-Axis maximum value. This will be overridden if the data has a larger value.

: Customize the step size of the chart.

⇒Show Legend: Show or Hide chart legend.

⇒Show Values on Hover: Show or Hide the Values on Hover.

⇒Animation: Add an advanced animation to the chart.

 


»Style

 

General

⇒Height: Set the height of the graph in pixels.

⇒Background Type: Set the background type either Classic or Gradient for the chart. And then customize the style according to your preference.

⇒Border Type: Here, select a border type from the list according to your preference.

⇒Border Width: Set the border width for the top, right, bottom and left of the chart for different dimensions.

⇒Border Color: Add a custom color to the chart border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the chart box for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the chart box for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the chart box for different dimensions. You can link the values together or customize them individually.

 

Title

⇒Color: Customize the chart title text color.

⇒Typography: Set the typography options for the text.

⇒Background Type: Set the background type either Classic or Gradient for the chart title. And then customize the style according to your preference.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the chart title text for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the title text border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the title for different dimensions.

⇒Text Shadow: Customize the text-shadow color, control the blur radius and set the horizontal and vertical value of the shadow.

⇒Margin: Set the margin value for the top, right, bottom and left around the title text for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the title text for different dimensions. You can link the values together or customize them individually.

 

X-Axis

⇒Axis Label: Customize the axis label color and size.

: Customize the data labels color and size.

: Customize the grid color and width.

 

Y-Axis

⇒Axis Label: Customize the axis label color and size.

: Customize the data labels color and size.

: Customize the grid color and width.

 

After done with all customization, Update changes to the page by clicking the APPLY button at the top


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Charts Element.


Was this article helpful to you? Yes No

How can we help?