How to Add Line Chart in Elementor with Happy Addons

The best way to visualize the data is to show a chart. There are many types of charts that we’ve already known. One of the charts we use the most is the line chart. A line chart is a way of plotting data points on a line. Often, it is used to compare the data. In this tutorial, we will show you how to add a line chart in Elementor using the Line chart widget from Happy Addons, because Elementor has no default feature to support creating the line chart.

How to Add Line Chart in Elementor with Happy Addons

Step 1: Install and Activate Happy Elementor Pro

The first thing you have to do is install Happy Addons Pro to your Elementor-powered WordPress site as the Line Chart feature is only available on the pro version. You can download Happy Addons Pro on its official website. Simply install and activate once you have downloaded the Happy Addons file.

Step 2: Create a New Content (Post/ Page) or Select an Existing Content)

Now we’re going to add a line chart in Elementor. You can create a new post/ page or select the existing one. In this example, we will create a new page. On your Dashboard go to Pages -> Add New. Next, press the Edit with Elementor button to bring you to the Elementor editor.

Step 3: Design the Line Chart

Once you entered Elementor Editor, next create a new section with a single column by clicking on the Add New Section button. Select the Line Chart widget from the menu bar and then drag & drop it into the column.

In the Edit Line Chart menu, go to the Content section and you will find options to edit Line Chart, Settings, and Wrapper Link. Click the Line Chart drop-down button to edit the items and apply some changes.

Now, you will see there are two areas, the Labels, and the items area. First, we need to edit the labels. Because the period of a line chart that we want to create is quarterly, so we need to change that. Write Q1, Q2, Q3, Q4 in the Labels box. (Write multiple labels with a comma (,) separator). In this example, we create a line chart with two items. So, we don’t need to add a new item.

We continued to edit the items. In the Content section, click the item box. You will find the options tab. CONTENT and STYLE. In this example, we’re creating the line chart of worldwide top 2 smartphones sales in 2021 (thousands of units). There are some changes in the Content tab that we applied for each item, as below:

Item #1:

  • Label: Apple
  • Data: 58, 51, 48, 82

Item #2:

  • Label: Samsung
  • Data: 76, 57, 69, 68

You can also go to the STYLES tab to adjust some settings. You can enable background fill, set background color, border color, and point color from here. But, in this tutorial, we don’t make any changes.

Once you finished editing the Line Chart, go to the Settings by clicking on the drop-down button. You will see many options that you can set as you want. Here, we will show you our settings are:

  • Title: Worldwide Top 2 Smarthones Sales in 2021 (Thousands of Units)
  • Scale Axis Range: 90
  • Step Size: 10

We’re going to the last thing that we e need to do for this tutorial. Click the Style section, you will find some options. There are Common, Legends, Labels, and Tooltip. You can play around with those settings, but in this example, we going to adjust on the Common option only. Click the Common drop-down then set the Border Width to 5, Line Tension to 5, and last but not least set the Point Border Width to 7.

Voilà, let’s see how amazing the line chart that you’ve just created is.

The Bottom Line

The line chart is simple, easy to read and interpret. But, in our opinion, the line chart can be an inconvenience to the readers, because it has many lines and may look cluttered. So, we suggest you don’t use too many items on the line chart.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?