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.
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.
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.
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.
Enter the Label Values here. For Eg: Jan | Feb | March or 2018 | 2019 | 2020
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 to your charts which will be displayed on the top right,
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.
Add or change the background color of each dot. For eg: #ffa500 | #008000 | #0000ff
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.
Enable or Disable to add bordered effect your chart peak and trough borders.
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.
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.
Use the toggle buttons to enable or disable the label.
If you decide to show the labels, the color option pops up. Add a color to your label here.
Adjust the size of the labels here.
If you want to hide all the labels, keep this option as disabled.
Adjust the size of the labels.
Change or add a color for labels.
Align the positions of the labels.
Align the position of the labels.
Enable this option to see a smooth transition effect of the charts when they load.
Custom Point Styles
Enable to customize your dot styles.
We have provided various styles to choose from. Select any one style as per your preference.
Add a background color to your point styles.
Point Normal Size / Point Hover Size
Set the size using the slider.
Set the color of your point border.
Point Border Width
Set the width using the slider.
Enable to add a tooltip to the chart.
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.
Enable the Aspect Ratio here.
Maintain Aspect Ratio
Enable to maintain an Aspect Ratio of the chart based on the width and height.
Set the Animation type here. You can select from a range of various animations offered.
Increase or Decrease the duration of the animation here.