Back to contents

JetElements. Bar Chart widget overview

This tutorial explains how you can use the Bar Chart widget of JetElements and customize it according to your requirements.

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 JetElements plugin.

Customization of Bar Chart widget

1 Step – Enabling the widget in WP Dashboard

First of all, enable the Bar Chart widget in the Elementor > JetElements Settings > Available Widgets block in the WP Dashboard.

enabling bar chart widget

2 Step – Drag and drop the widget in Elementor

Open the page in Elementor editor, find the Bar Chart widget in the panel with widgets and drop it in a certain place.

bar chart widget in Elementor

3 Step – Content tab overview

You can see the widget’s settings block on the left. In the Content tab there are two sections, Chart Data and Settings. You are able to select a bar type (horizontal or vertical), write labels and add an appropriate number of items included in the chart.

chart data settings

It is possible to customize each item as you want. Click the item and the window with available adjustments will appear. You need to specify the label and enter the included data in the Content tab.

You can pull dynamic data from the meta fields created with JetEngine plugin by clicking the Dynamic option on the right above the Label and Data fields.
item settings

Switch to the Style tab and design color for background and borders here.

style settings of the item

5 Step – Settings section overview

There is the Settings section below. Here you can determine the chart height, enable the Grid Lines option for displaying a grid on the background of the chart. Also, you are able to turn on showing the labels and tooltips.
Moreover, in the Legend subsection it is possible to set the options for the legend, such as Display and Position. Enable the Revers option for showing datasets in reverse order in the legend.

settings block

6 Step – Styling the widget

If you click the Style tab on top 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.

style settings of the Bar Chart widget

7 Step – Viewing the result on the frontend

When you finish setting the widget, click the Update button and view the chart on the frontend.

bar chart on the frontend

Hope, this tutorial was informative for you. Group the data and demonstrate them in the form of a graph with bars using JetElements Bar Chart widget.