Reports
Results by month, region or product.
Content / widget · Elementor module
Manual Data Bar Chart Widget Plugin for Elementor
Type in a few labels and numbers and show them as a horizontal bar chart with a title, the value at each bar’s end, sorting, a fixed scale and one bar picked out.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Manual data bar chartProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published widgets with numbers typed into them.
02 / Inside WordPress
Manual data bar chart controls in Elementor
Chart sets the title and note, the bars with their labels and values, the unit and where it goes, decimal places, order, what a full bar equals, the bar to pick out, values at the bar ends, the labels’ layout and spacing, text before and after each label, text when there are no bars, the label tag and an icon. The Style tab covers the labels, bar colour and lighter colour, bar thickness, label column width, the title, note and values, and the icon.
03 / Website use cases
Where to use manual data bar chart
Reports, case studies and about pages often need to compare a handful of numbers, and a full charting library is more than they need. This widget turns labels and numbers you type in into a horizontal bar chart built from plain HTML: a title saying what it shows, the value with its unit at the end of each bar, largest-first or smallest-first order, a fixed scale for percentages, one bar picked out to make the point, and a source note.
Case studies
Before and after figures.
Recipes and specs
Shares of a whole as percentages.
04 / Installation and setup
How to add a bar chart in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Manual data bar chart in the Complementor library.
Add the widget and give the chart a title that says what the bars show.
Add a bar for each label with its value, and set the unit.
Choose the order, and pick out the bar that makes your point.
Set the bar colour and thickness under Style.
05 / Content and style controls
Customize manual data bar chart in Elementor
Configure the settings available for this module to suit the page you are building.
Bars from labels and numbers you type in.
The value and unit at the end of each bar.
Largest first, smallest first or as entered.
A fixed full bar, such as 100%.
One bar picked out, the rest lighter.
A title and a source note.
06 / Choose the right approach
Manual data bar chart and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
ACF capacity remaining
Places left from two numbers.
Product price threshold note
Progress towards free shipping.
07 / Requirements and compatibility
Manual data bar chart compatibility with Elementor
- Requires Elementor.
- Numbers are typed into the widget; up to 30 bars of 0 or more.
- Horizontal bars for one set of numbers.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot manual data bar chart
Check these settings if the published page behaves differently from the editor.
Why is a bar missing?
It has no label or its value is below 0; the editor says how many rows were left out.
Why are all bars full length?
“Full bar equals” is smaller than your values; empty it to scale to the largest value.
Why do the labels sit above the bars?
The chart is narrow, such as on a phone, so labels move above the bars to leave room.
Manual data bar chart plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Does it load a charting library?
No. It is plain HTML and CSS with no script.
Can it read data from elsewhere?
No. You type the numbers into the widget.
How many bars can I add?
Up to 30.
Is it accessible?
Yes. Every label and value is text in a list named by the title, and the bars themselves are decorative.
10 / Annual All Access subscription
Get manual data bar chart with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.