{"id":28351,"date":"2021-08-16T17:00:11","date_gmt":"2021-08-16T15:00:11","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=28351"},"modified":"2021-08-16T11:32:59","modified_gmt":"2021-08-16T09:32:59","slug":"how-to-create-charts-and-graphs-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-charts-and-graphs-in-wordpress\/","title":{"rendered":"How to Create Charts and Graphs in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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\u2019s nothing like a sleek visual representation to make it more consumable.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Creators of WordPress themes know this, as is evident from the variety of <a href=\"https:\/\/qodeinteractive.com\/theme-shortcode\/line-graph-wordpress-themes\/\">themes with graph support<\/a>. However, when we were creating our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a> plugin, we wanted to do it a step further. So, among the sixty free Elementor addons you get with the plugin \u2013 <strong>the biggest free bundle you\u2019ll find online<\/strong> \u2013 there are charts and graphs addons.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll focus on the one that lets you <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/graphs\/\">create graphs<\/a>. <strong>There are so many awesome things you can do with it that we\u2019ve decided to showcase how to create two beautiful graphs you can see on the addon\u2019s page.<\/strong> We\u2019ve gone so far as to create a video detailing the process \u2013 albeit in a slightly different order of presentation \u2013 and you can see it here:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/If7bbyt4wSE\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But if watching video isn\u2019t your cup of tea and reading an article is, you can skip the video altogether and just continue reading. What awaits is the following:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-graph-in-wordpress\">Adding a Graph in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-content-of-the-line-graph\">Editing the Content of the Line Graph<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-line-graph\">Styling the Line Graph<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-and-styling-the-bar-graph\">Editing and Styling the Bar Graph<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-a-graph-in-wordpress\"><\/a>Adding a Graph in WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs.jpg\" class=\"attachment-full size-full\" alt=\"Graphs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before you\u2019re able to add a graph in WordPress using the <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> and its graph widget, you\u2019ll need to install and activate the <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor page builder<\/a> plugin. You can easily find it on WordPress.org, or by navigating to <em><strong>Plugins &gt; Add New<\/strong><\/em> 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. <strong>As far as the Qi Addons go, they will work fine with either version.<\/strong> And if you\u2019re completely new to Elementor, you might want to give our <a href=\"https:\/\/qodeinteractive.com\/magazine\/elementor-tutorial-for-beginners\/\">Elementor guide<\/a> a read.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After installing both plugins, you can create a new page or edit an existing one to add the graphs you\u2019ve seen on the Graph addon homepage. <strong>We\u2019ve created a new page, and we\u2019ve also built a two-column section to house our two graphs.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Elementor-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Elementor-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Elementor-Columns-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Elementor-Columns-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Elementor-Columns-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After finding the Graphs widget and moving it over to a free column, you\u2019ll get a glimpse of some placeholder content. <strong>We\u2019ll show you how we turned it, step by step, into the first of the two graphs we\u2019re using to inspire you to create your awesome graphs.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-content-of-the-line-graph\"><\/a>Editing the Content of the Line Graph<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Graphs.jpg\" class=\"attachment-full size-full\" alt=\"Edit Graphs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Graphs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Graphs-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Graphs-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Graphs-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right off the bat, you\u2019ll 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, \u201c1 month,\u201d \u201c3 months,\u201d and so on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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. <strong>We\u2019ll change them to \u201cOne,\u201d \u201cTwo,\u201d \u201cThree,\u201d \u201cFour,\u201d \u201cFive.\u201d<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"536\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Data-Labels.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Data Labels\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Data-Labels.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Data-Labels-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Data-Labels-768x425.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Data-Labels-620x343.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving up, you\u2019ll be able to set the chart items, or add new ones using the Add Item button. When editing the items, you\u2019ll notice a couple of very important things. The first is the dataset values \u2013 the values that sort of set the curvature of the line in this type of graph. You\u2019ll also see the dataset labels \u2013 these allow you to label each item in a way that\u2019ll be visible in a legend when you enable it in the style options. You\u2019ll 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"551\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Item-Options.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Item Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Item-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Item-Options-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Item-Options-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Item-Options-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To get the type of chart we wanted, <strong>we\u2019ve changed the dataset values to 39, 62, 64, 51, and 58.<\/strong> <strong>We\u2019ve changed the name of the dataset label to Photography. The color we\u2019ve picked has a hex code of #888db3, and we\u2019ve used it for the area color, too. We\u2019ve given the Filling Modes a value of +1<\/strong>, to color the area between lines one and two. Here\u2019s what we got after all these changes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"632\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Change-Item-Options.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Change Item Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Change-Item-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Change-Item-Options-300x196.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Change-Item-Options-768x501.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Change-Item-Options-620x404.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the second item, <strong>we\u2019ve 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\u2019ve also set the filling mode to +1.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Second-Item.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Second Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Second-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Second-Item-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Second-Item-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Second-Item-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>For the third item, we\u2019ve used 39, 57, 55, 38, and 45 as dataset values, and we\u2019ve given it the label of Web Design. The color we picked was #EDEDED99 \u2013 it has some transparency in it, and we\u2019ve set the filling mode to \u201corigin\u201d to get this really neat effect.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"635\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Third-Item.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Third Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Third-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Third-Item-300x197.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Third-Item-768x503.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Third-Item-620x406.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that, we\u2019ve made the content changes to the first graph, and we can move on to styling it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-line-graph\"><\/a>Styling the Line Graph<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you move to the Style options, the first thing you\u2019ll get to pick is the style of graph you want to create. Right now, we\u2019ve shown you how we\u2019ve created a line graph. In a bit, we\u2019ll show you how we\u2019ve built a bar graph. You\u2019ll be able to choose the graph alignment, its size, as well as the border width \u2013 the width of the lines. <strong>We\u2019ve set the graph size to 87% and the border width to 3 pixels.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next in line are the Legend Style options. All those dataset labels we\u2019ve 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. <strong>We\u2019ve enabled the legend in our chart, chose its position to be at the bottom, and stuck with the default alignment.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Legend-Style.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Legend Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Legend-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Legend-Style-300x119.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Legend-Style-768x304.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Legend-Style-620x245.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the legend bar, you\u2019ll be able to choose its width, height, and margin. <strong>For width and height, we\u2019ve chosen 8 pixels. We\u2019ve set the margin to 40 pixels.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-2.jpg\" class=\"attachment-full size-full\" alt=\"Legend Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-2-300x122.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-2-768x313.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-2-620x253.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final set of Legend Style options lets you set the label color, font, font size, and weight. <strong>We\u2019ve set the color to #1e1e1e, font to DM Sans, font size to 16 pixels, and font weight to medium.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-3.jpg\" class=\"attachment-full size-full\" alt=\"Legend Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-3.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-3-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-3-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Legend-Style-3-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the final set of Style options, the Tick Style, you\u2019ll be able to set the minimum and maximum value displayed on the Y axis, as well as the step size you want to show. <strong>We\u2019ve made it so that it shows values from 0 to 80 in steps of 20.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Tick-Style.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Tick Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Tick-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Tick-Style-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Tick-Style-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Tick-Style-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-and-styling-the-bar-graph\"><\/a>Editing and Styling the Bar Graph<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that you\u2019re 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, <strong>we went straight to the Style tab and switched the Graph Type to Bar<\/strong>. Switching back to the style tab, we made a couple of changes \u2013 <strong>deleted one of the items, and set the data labels to \u201cOne,\u201d \u201cTwo,\u201d \u201cThree,\u201d and \u201cFour.\u201d<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar Two Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar Two Items Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Two-Items-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Back at the Style tab, <strong>we\u2019ve changed the graph size of the new graph to 85%. We\u2019ve set the Border Width and Hover Border Width to zero. We\u2019ve 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.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar Style Tab Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Style-Tab-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the Legend Style, we\u2019ve pretty much copied the values of the previous graph. <strong>We\u2019ve enabled the legend and positioned it on the bottom. We\u2019ve 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\u2019ve copied the Tick Style too, with values of 0, 80, and 20.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar Tick Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar Tick Style Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Tick-Style-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving back to the content, it\u2019s time to set the items to their new values. <strong>The dataset we\u2019ve used for the first item is 63,38,24, and 56. The label is Photography, and we\u2019ve used #888DB3 as our color of choice for both the Area Color and the Hover Area Color.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item-Style.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Bar Item Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item-Style-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item-Style-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Bar-Item-Style-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the second item,<strong> 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<\/strong>. With that, you can preview and see the results of your work \u2013 they should be a close match to the example you can see on the widget\u2019s page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"458\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Final-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Graphs Final Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Final-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Final-Preview-300x142.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Final-Preview-768x363.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Graphs-Final-Preview-620x293.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2019ve shown you how you can create stunning charts in only a few options \u2013 it doesn\u2019t get any easier or prettier than this. So if there\u2019s data you need displayed visually, don\u2019t hesitate and get the biggest free pack of Elementor addons in the world. You\u2019ll get it for the graphs, and you\u2019ll continue using it for the remaining 59 addons.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking for a quick and easy way to build some WordPress charts and graphs? Qi Addons for Elementor will help, and we&#8217;ll show you how!<\/p>\n","protected":false},"author":9295,"featured_media":28442,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[133,114,4,13],"class_list":["post-28351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-infographics","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=28351"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28351\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/28442"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=28351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=28351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=28351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}