Chart Elementor Widget – How To Add Graphs/Charts to Elementor

Chart Widget in Mighty Addons help you to showcase your data in graphs and chart formats. It gives you Line and Bar graph types.

In order to use the Chart Widget in Elementor, you need the following plugins installed on your WordPress site:

  • Elementor Page Builder
  • Mighty Addons (Free Version)
  • Mighty Addons (Pro version)

The Chart Widget are available in the Pro version only. So if you don’t have the Mighty Addons Pro, upgrade to pro today and access all the premium features.

Once you are done with installation of Mighty Addons and activated the license, navigate to Widget section in Mighty Addons Dashboard and Enable it.

Chart Elementor Widget

Now create a new page or edit the page where you want to add the chart or graph. Look for Chart widget in the Elementor widget panel and drag it to the page.

Chart Elementor Widget

Basic Settings

Chart Elementor Widget

Under the basic settings you have to select the Graph type. It gives you two types of the Graph types.

  • Line – It will show data in the line graph.
  • Bar– It will show data in the bar graph.

Datasets

Chart Elementor Widget

Under this tab, you have to set the Data labels and Data Sets. You can add as many data sets as you want.

  • Data Label:- Set data label as your need which shows on the horizontal axis.
  • Dataset Values:- Set data values as per your need which shows on the vertical axis.
  • Dataset Label:- Add Data Label which helps you to recognize the line or bar.
  • Line Color:– Choose line color as you want.
  • Line Hover Color:- Choose line hover color which displays when the mouse hovers over the bar graph.
  • Filling Modes:- It will show the Filling area of two lines.
  • Area color:- It will show the area color.
  • Area Hover Color:- It will show the hover color which displays when the mouse hovers over the bar graph.

How to Style Bar/Line Chart?

Chart Elementor Widget

After you have added the widget on your page it’s now time to style it with options available. The styling options are all under the Style tab.

You can set all the options in Graph, Legend, and Tick according to your requirements.

This is how you can set up Chart Widget on your Elementor website. Still, you face any issues, feel free to post us on our support forum.