{"id":15955,"date":"2019-10-03T15:10:27","date_gmt":"2019-10-03T15:10:27","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=15955"},"modified":"2023-02-05T17:08:34","modified_gmt":"2023-02-05T17:08:34","slug":"jetelements-bar-chart-widget-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/","title":{"rendered":"Bar Chart Widget Overview"},"content":{"rendered":"\n<p>Present statistical results of surveys on your website using horizontal or vertical bars with different heights or lengths, which are corresponding to the values. Display and compare the frequency, amount, or measure clustered into categories in a graphical way using the Bar Chart widget of the JetElements plugin.<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Drag and drop the widget in Elementor<\/strong><\/p>\n\n\n\n<p>Open the page in <strong>Elementor<\/strong> editor, find the <strong>Bar Chart<\/strong> widget in the panel with widgets and drop it in a certain place.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/10\/bar-chart-widget.png\" alt=\"Bar Chart widget\" class=\"wp-image-20944\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Fill the chart with content<\/strong><\/p>\n\n\n\n<p>You can see the widget\u2019s settings block on the left. In the <strong>Content<\/strong> tab, there are two sections &#8211;<strong> Chart Data<\/strong>, and <strong>Settings<\/strong>. <\/p>\n\n\n\n<p>Let&#8217;s go through the <strong>Chart Data<\/strong> section first. <\/p>\n\n\n\n<ul>\n<li><strong>Bar Type<\/strong>. Here you are able to select if the bar will be horizontal or vertical;<\/li>\n\n\n\n<li><strong>Labels<\/strong>. As you can see, by default the chart has three sets and each of them has three bars in it. Labels field allows you to give every set of bars a separate name. If there is more than one set, you have to separate the names with a semicolon;<\/li>\n\n\n\n<li><strong>Scale Axis Range<\/strong>. In this field, you can set the maximum number of the scale according to your needs;<\/li>\n\n\n\n<li><strong>Step Size<\/strong>. The number you put into this field will define the size of the step. When your maximum scale is &#8220;10&#8221;, the step size &#8220;1&#8221; is just fine. However, to make the chart more illustrative, when the maximum scale is &#8220;1000&#8221; it probably will be better to set the step size to &#8220;10&#8221; or even &#8220;100&#8221;. Play with the numbers to make the chart understandable for the users.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/10\/chart-data-settings-1.png\" alt=\"Chart Data section settings\" class=\"wp-image-20945\"\/><\/div>\n\n\n\n<p>At the bottom of the Chart Data section, there are <strong>Items<\/strong>. Those items represent the bars that the chart includes. It is possible to customize each item as you want. Click the item and the window with available adjustments will appear. Every item has two tabs with settings in them. <\/p>\n\n\n\n<ul>\n<li><strong>Content<\/strong>. In the <strong>Label <\/strong>field, you can name the bar and define its value in the <strong>Data <\/strong>text area. If there are several sets of bars you can insert several values here and separate them with semicolons. <\/li>\n<\/ul>\n\n\n\n<div class=\"attention-banner info-banner\"><figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2018\/12\/information-icon.svg\" alt=\"knowledge base information icon\" width=\"30\" height=\"30\"><\/figure><strong>NOTE!<\/strong><br>You can pull dynamic data from the meta fields created with <a href=\"https:\/\/crocoblock.com\/plugins\/jetengine\/\" target=\"_blank\" rel=\"noopener noreferrer\">JetEngine<\/a> plugin by clicking the <strong>Dynamic Tags<\/strong> option to the right from the <strong>Label<\/strong> and <strong>Data<\/strong> fields.<\/div>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/10\/chart-item-content.png\" alt=\"Chart Data item content tab\" class=\"wp-image-20946\"\/><\/div>\n\n\n\n<ul>\n<li><strong>Style<\/strong>. Here in this tab, you can define the colors of the bar and its border in normal state and when the user hovers a pointer over the section.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/10\/chart-item-style.png\" alt=\"Chart data item style settings\" class=\"wp-image-20947\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>3<\/span> Step<\/b> <strong>\u2014 Get along with the settings<\/strong><\/p>\n\n\n\n<p>In the <strong>Settings<\/strong> section of the <strong>Content <\/strong>menu tab, you can choose the general features of the chart appearance. <\/p>\n\n\n\n<ul>\n<li><strong>Chart Height<\/strong>. You can set the height by typing the number to the field or do it manually by moving the slider;<\/li>\n\n\n\n<li><strong>Grid Lines<\/strong> toggle enables the displaying of a grid on the background of the chart;<\/li>\n\n\n\n<li><strong>Labels <\/strong>and <strong>Tooltips <\/strong>toggles turn it displaying of the corresponding data;<\/li>\n\n\n\n<li>In the <strong>Legend<\/strong> subsection, it is possible to set the options for the legend. <strong>Display<\/strong> toggle defines if the legend will be shown and the <strong>Position<\/strong> drop-down menu allows you to choose where it will be shown;<\/li>\n\n\n\n<li>Enable the <strong>Revers<\/strong> option for showing datasets in reverse order in the legend.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/09\/settings-block.png\" alt=\"bar Chart settings block\" class=\"wp-image-15963\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>4<\/span> Step<\/b> <strong>\u2014 Style the chart up and see the result<\/strong><\/p>\n\n\n\n<p>Click the <strong>Style<\/strong> menu tab and you will see a lot of style settings for the chart, labels, legend, and tooltips. You can define the font settings, border width, and pick colors.<\/p>\n\n\n\n<p>When you finish setting the widget, click the &#8220;<strong>Update<\/strong>&#8221; button, and view the chart on the frontend.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/10\/bar-chart-example.png\" alt=\"bar chart example\" class=\"wp-image-20943\"\/><\/div>\n\n\n\n<p>Hope, this tutorial was informative for you. Group the data and demonstrate them in the form of a graph with bars using the JetElements Bar Chart widget.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains how you can use the Bar Chart widget of JetElements and customize it according to your requirements.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[515],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: How to Work With Bar Chart Widget | Crocoblock<\/title>\n<meta name=\"description\" content=\"Use Bar Chart widget of JetElements lugin for displaying statistics and graphs on your website in a compact, well-structured form.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Work With Bar Chart Widget | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Use Bar Chart widget of JetElements lugin for displaying statistics and graphs on your website in a compact, well-structured form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-05T17:08:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/10\/bar-chart-widget.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/\",\"name\":\"JetElements: How to Work With Bar Chart Widget | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-10-03T15:10:27+00:00\",\"dateModified\":\"2023-02-05T17:08:34+00:00\",\"description\":\"Use Bar Chart widget of JetElements lugin for displaying statistics and graphs on your website in a compact, well-structured form.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bar Chart Widget Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Work With Bar Chart Widget | Crocoblock","description":"Use Bar Chart widget of JetElements lugin for displaying statistics and graphs on your website in a compact, well-structured form.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Work With Bar Chart Widget | Crocoblock","og_description":"Use Bar Chart widget of JetElements lugin for displaying statistics and graphs on your website in a compact, well-structured form.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/","og_site_name":"Help Center","article_modified_time":"2023-02-05T17:08:34+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/10\/bar-chart-widget.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/","name":"JetElements: How to Work With Bar Chart Widget | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-10-03T15:10:27+00:00","dateModified":"2023-02-05T17:08:34+00:00","description":"Use Bar Chart widget of JetElements lugin for displaying statistics and graphs on your website in a compact, well-structured form.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-bar-chart-widget-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Bar Chart Widget Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/15955"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=15955"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=15955"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=15955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}