Skip to main content
Data & charts

Bar Chart for Breakdance

A bar chart you fill in the editor, with no spreadsheet or embed. Switch it to horizontal or stacked bars with one control.

Free Uses Chart.js, bundled in the plugin and loaded only on pages that have a chart.
Live preview

Results overview

Results overview
LeadsJobs won
Jan126
Feb199
Mar158
Apr2514
May2213
Jun3018

This is the real element, running with its sample content.

Enter data in the panel

Type labels and comma separated values for each dataset, and pick a color per dataset.

Horizontal and stacked

Flip the bars sideways, stack datasets, and set the corner radius.

Number formatting

Prefix, suffix, decimals, compact numbers (1.2K) and your own locale.

CSV download

Optionally add a Download CSV button so visitors can take the data.

Add it to your page in 3 steps

1

Open your page in Breakdance

In WordPress, go to Pages, hover over your page and click Edit with Breakdance.

Pages
Your page
Edit with Breakdance
2

Open the element panel

Click the plus button at the top left, then open the BreakUI Pro group and find Bar Chart.

Add
BreakUI Pro
Bar Chart
3

Drag it into your layout

Drop it into a section or container. It loads with sample content so you can see it working right away.

Drag
Drop on the page
Done

What it looks like in the editor

Real screenshots from the Breakdance editor. Select the element, then use the Content tab for your data and the Design tab for the look.

Bar Chart element Content tab in the Breakdance editor
1 Content tab: add your text, items and data
Bar Chart element Design tab in the Breakdance editor
2 Design tab: colors, spacing and typography

The main settings

Select the element in Breakdance. Everything lives in two tabs.

Content tab

Your text, items, links and behavior. Change the sample content and you are done.

Design tab

Colors, typography, borders, spacing and layout, with the normal Breakdance controls.

Element Width

Set the width in percent, pixels, em, rem, vw or vh, plus max width, min width and alignment.

Design
Spacing
Element Width

See it in action

Real renders of the element with different settings.

Live preview

Results overview

Results overview
LeadsJobs won
Jan126
Feb199
Mar158
Apr2514
May2213
Jun3018

Horizontal and stacked

Style it your way

The Design tab has these groups. Everything uses the normal Breakdance design controls.

Container
Background Border Padding
Chart
Height Text Color Font Size Grid Color
Title
Typography Space Below

Make sure each dataset has the same number of values as there are labels.

Turn on Show Download CSV Button to let visitors take the data.

Get BreakUI ProFree, no account, no license key.
Download the plugin