Bar Chart
Turn numbers into a bar chart people understand at a glance.
Vertical or horizontal bar charts on Chart.js with stacks, line overlays, gradients, value labels and an accessible legend.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: free — installs straight from Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Bar Chart. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Data
| Setting | What you can set |
|---|
| Bars | Vertical (columns) or Horizontal |
| Labels | One label per bar group, separated by commas. |
| Datasets | each item: Data, Dataset Name, Values, Draw As, Stack Group, Curve, Fill Below Line, Dashed Line, Colours, Fill, … (15 in all) |
| Chart Height | 120–1200 |
| Stacked | Pile the datasets on top of each other instead of side by side. |
| Stack to 100% | Show each dataset as a share of its bar group. |
Axes & Grid
| Setting | What you can set |
|---|
| Category Grid Lines | On / off |
| Value Grid Lines | On / off |
| Category Labels | On / off |
| Value Labels on Axis | On / off |
| Category Axis Title | Text |
| Value Axis Title | Text |
| Start at Zero | On / off |
| Minimum | Leave empty to fit the data. |
| Maximum | Leave empty to fit the data. |
| Step Size | Distance between value ticks. Empty = automatic. |
| Maximum Ticks | Number |
| Reverse Value Axis | On / off |
| Setting | What you can set |
|---|
| Show Title | On / off |
| Title | Text |
| Subtitle | Text |
| Title HTML Tag | H2, H3, H4, H5, H6, div or p |
| Title Alignment | Start, Center or End |
| Show Legend | On / off |
| Legend Position | Top, Bottom, Left or Right |
| Legend Alignment | Start, Center or End |
| Legend Marker | Box, Rounded box, Circle or Line |
| Reverse Order | On / off |
| Click to Hide a Dataset | On / off |
| Show Tooltips | On / off |
| Tooltip Shows | The bar under the pointer, Every dataset in the group, Everything on the same X or Everything on the same Y |
| Add a Total Line | On / off |
Numbers & Value Labels
| Setting | What you can set |
|---|
| Prefix | Text |
| Suffix | Text |
| Decimals | Number |
| Thousands Separators | On / off |
| Short Numbers (12K, 3.4M) | On / off |
| Value on Each Bar | None, Past the end of the bar, Inside, at the end or In the middle |
| Caption | Text |
| Chart Description | Read by screen readers. Defaults to the title. |
| Data Table for Screen Readers | A hidden table with the same numbers, so the chart is not an image only. |
Animation
| Setting | What you can set |
|---|
| Play | When scrolled into view, On page load or No animation |
| Duration (ms) | Number |
| Easing | Linear, Ease out, Ease in and out, Ease in cubic, Ease in circ, Overshoot, Elastic, Bounce, … (9 in all) |
| Delay Between Bars (ms) | Bars grow one after another. |
Style tab: design controls for Box, Bars, Grid & Axis Lines, Title, Legend, Axis Labels, Value Labels or Tooltip — colours, typography, spacing, borders and hover states.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
- Works well with: Advanced Data Table, Advanced Tabs, Data Table.
