Advanced Charts

< All Topics

Use this widget to show your data in multiple ways using the collection of the most popular & advanced charts in Elementor page builder. You have options to showcase simple, analytics, three-dimensional and even more complex data using this Elementor widget of charts & graphs.

Just plain content can boring, adding these charts will make your website much more interesting and you can add value.

Pro tip
Showing real statistics/data using plain numbers can be monotonous. Why not use these interactive and cool Pie Charts instead? Users engage with visual stuff and understand it way more better.

How to use the Advanced Charts widget of The Plus Addons For Elementor

The Advanced Charts widget comes with 6 different chart layouts. Let’s understand how to use widget in the tutorial below.

Table Of Contents

General Steps

Search for the Advanced Charts Widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Chart

Select chart type for the advanced Charts widget..

Select Chart

Select the type of chart you want to display. We offer 6 different types of charts to choose from. They are Line, Bar, Radar, Doughnut & Pie, Polar Area, and Bubble. You can check all these charts in our demo.

Label Values

Enter the Label Values here. For Eg: Jan | Feb | March or 2018 | 2019 | 2020

Dataset

Add item in data chart boxes for the advanced Charts widget.

Chart Data Boxes

Click on the Add item button. Then, start adding content to the data boxes. You are given the following options:

Add Label

Add Label to your charts which will be displayed on the top right,

Data

Add data where you want the chart to show its peak and trough.

Multiple Dot Background

Enable or Disable the dot background using the toggle button.

Dot Background

Add or change the background color of each dot. For eg: #ffa500 | #008000 | #0000ff

Multiple Border

Add or change the color of each border. For eg: #ffa500 | #008000 | #0000ff

Fill (Works only Line and Radar chart)

Enable or Disable to use the Fill Color option. It fills the chart with your selected colors above.

Border Dash

Enable or Disable to add bordered effect your chart peak and trough borders.

Extra Options

Grid Lines

Enable and set the Grid lines here. If you don’t want Grid Lines, disable it.

X Axis Tab

Set the cosmetic options for X Axis.

Grid Color X Axis

Set the color of the X Axis for your chart.

Zero Line Color

Set the color of the Zero Line for your chart.

Draw Border

Enable this option to show grid lines on the chart area.

Draw Border On Chart Area

Enable this option to show vertical grid lines on the chart area.

Y Axis Tab

Similarly, set the cosmetic options for the Y Axis.

Labels

Use the toggle buttons to enable or disable the label.

Label Color

If you decide to show the labels, the color option pops up. Add a color to your label here.

Label Size

Adjust the size of the labels here.

Legend

If you want to hide all the labels, keep this option as disabled.

Size

Adjust the size of the labels.

Color

Change or add a color for labels.

Position

Align the positions of the labels.

Alignment

Align the position of the labels.

Smooth

Enable this option to see a smooth transition effect of the charts when they load.

Custom Point Styles

Enable to customize your dot styles.

Point Styles

We have provided various styles to choose from. Select any one style as per your preference.

Point Background

Add a background color to your point styles.

Point Normal Size / Point Hover Size

Set the size using the slider.

Point Border

Set the color of your point border.

Point Border Width

Set the width using the slider.

Tooltip

Enable to add a tooltip to the chart.

Event

Select the event of your tooltip. It can be hover or click event.

Font Size, Title Color, Body Font Color and Tooltip Background

Change the appearance of your tooltip using these cosmetic options. You can adjust the size, change colors and add a background.

Aspect Ratio

Enable the Aspect Ratio here.

Maintain Aspect Ratio

Enable to maintain an Aspect Ratio of the chart based on the width and height.

Animation

Set the Animation type here. You can select from a range of various animations offered.

Duration

Increase or Decrease the duration of the animation here.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?