How to Create Charts and Graphs in WordPress
Is there a better way to understand data, the relationship between different data points, as well as change of value through time than by using charts and graphs? When it comes to presenting something as dry and unexciting as numbers, there’s nothing like a sleek visual representation to make it more consumable.
Creators of WordPress themes know this, as is evident from the variety of themes with graph support. However, when we were creating our Qi Addons for Elementor plugin, we wanted to do it a step further. So, among the sixty free Elementor addons you get with the plugin – the biggest free bundle you’ll find online – there are charts and graphs addons.
In this article, we’ll focus on the one that lets you create graphs. There are so many awesome things you can do with it that we’ve decided to showcase how to create two beautiful graphs you can see on the addon’s page. We’ve gone so far as to create a video detailing the process – albeit in a slightly different order of presentation – and you can see it here:
But if watching video isn’t your cup of tea and reading an article is, you can skip the video altogether and just continue reading. What awaits is the following:
Before you’re able to add a graph in WordPress using the Qi Addons for Elementor and its graph widget, you’ll need to install and activate the Elementor page builder plugin. You can easily find it on WordPress.org, or by navigating to Plugins > Add New and searching for it. The plugin is free to use up until the point you decide you need the features that are only available to paying customers. As far as the Qi Addons go, they will work fine with either version. And if you’re completely new to Elementor, you might want to give our Elementor guide a read.
After installing both plugins, you can create a new page or edit an existing one to add the graphs you’ve seen on the Graph addon homepage. We’ve created a new page, and we’ve also built a two-column section to house our two graphs.
After finding the Graphs widget and moving it over to a free column, you’ll get a glimpse of some placeholder content. We’ll show you how we turned it, step by step, into the first of the two graphs we’re using to inspire you to create your awesome graphs.
Right off the bat, you’ll notice the three lines that represent the datasets. Their options hold the bulk of the settings you can change regarding the contents of the graph. First, however, pay attention to the Data Labels that run underneath the graph, along the X-axis of the graph. Currently, they say, “1 month,” “3 months,” and so on.
To change those data labels, all you need to do is enter the new ones in the General menu of the Content options, right underneath the items. Make sure to separate them using a comma, though. We’ll change them to “One,” “Two,” “Three,” “Four,” “Five.”
Moving up, you’ll be able to set the chart items, or add new ones using the Add Item button. When editing the items, you’ll notice a couple of very important things. The first is the dataset values – the values that sort of set the curvature of the line in this type of graph. You’ll also see the dataset labels – these allow you to label each item in a way that’ll be visible in a legend when you enable it in the style options. You’ll also notice color options, filling modes, area, and cover area colors. Some of these options are for line graphs, and some are for bar graphs alone.
To get the type of chart we wanted, we’ve changed the dataset values to 39, 62, 64, 51, and 58. We’ve changed the name of the dataset label to Photography. The color we’ve picked has a hex code of #888db3, and we’ve used it for the area color, too. We’ve given the Filling Modes a value of +1, to color the area between lines one and two. Here’s what we got after all these changes.
Moving on to the second item, we’ve given it the dataset values of 39,59,58,44,54, the label of Art Direction, #c1c3c7 as the line and area color, and we’ve also set the filling mode to +1.
For the third item, we’ve used 39, 57, 55, 38, and 45 as dataset values, and we’ve given it the label of Web Design. The color we picked was #EDEDED99 – it has some transparency in it, and we’ve set the filling mode to “origin” to get this really neat effect.
With that, we’ve made the content changes to the first graph, and we can move on to styling it.
When you move to the Style options, the first thing you’ll get to pick is the style of graph you want to create. Right now, we’ve shown you how we’ve created a line graph. In a bit, we’ll show you how we’ve built a bar graph. You’ll be able to choose the graph alignment, its size, as well as the border width – the width of the lines. We’ve set the graph size to 87% and the border width to 3 pixels.
Next in line are the Legend Style options. All those dataset labels we’ve been choosing will start to show up now. The options you have at your disposal include enabling the chart legend, choosing its position and alignment. We’ve enabled the legend in our chart, chose its position to be at the bottom, and stuck with the default alignment.
As for the legend bar, you’ll be able to choose its width, height, and margin. For width and height, we’ve chosen 8 pixels. We’ve set the margin to 40 pixels.
The final set of Legend Style options lets you set the label color, font, font size, and weight. We’ve set the color to #1e1e1e, font to DM Sans, font size to 16 pixels, and font weight to medium.
In the final set of Style options, the Tick Style, you’ll be able to set the minimum and maximum value displayed on the Y axis, as well as the step size you want to show. We’ve made it so that it shows values from 0 to 80 in steps of 20.
Now that you’re somewhat familiar with the options at your disposal, we can pick up the pace when showing you how to create the bar graph. After finding the Graphs addon again and dragging it to the other available column, we went straight to the Style tab and switched the Graph Type to Bar. Switching back to the style tab, we made a couple of changes – deleted one of the items, and set the data labels to “One,” “Two,” “Three,” and “Four.”
Back at the Style tab, we’ve changed the graph size of the new graph to 85%. We’ve set the Border Width and Hover Border Width to zero. We’ve set the Bar Size, which determines how much of its allotted space a single bar will occupy, to 0.88. The Category Size, which determines how much of its allotted space a group of bars will occupy, was set to 0.6.
In the Legend Style, we’ve pretty much copied the values of the previous graph. We’ve enabled the legend and positioned it on the bottom. We’ve set the width and height of the bar to 11 pixels, and the margin to 40. The color we chose for the label was #1e1e1e, the font DM Sans, font size 16, and weight medium. We’ve copied the Tick Style too, with values of 0, 80, and 20.
Moving back to the content, it’s time to set the items to their new values. The dataset we’ve used for the first item is 63,38,24, and 56. The label is Photography, and we’ve used #888DB3 as our color of choice for both the Area Color and the Hover Area Color.
For the second item, the dataset values are 45, 76, 48, and 36. We changed the label to Art Direction and the Area and Hover Area Colors to #c1c3d7. With that, you can preview and see the results of your work – they should be a close match to the example you can see on the widget’s page.
Let’s Wrap It Up!
If you ever need to create a chart or graph, the Qi Addons for Elementor plugin will have just the right addon for you. We’ve shown you how you can create stunning charts in only a few options – it doesn’t get any easier or prettier than this. So if there’s data you need displayed visually, don’t hesitate and get the biggest free pack of Elementor addons in the world. You’ll get it for the graphs, and you’ll continue using it for the remaining 59 addons.
