Line Chart for Breakdance
A line chart for trends over time, with smooth curves, filled areas, stepped lines and stacked series.
Results overview
| Leads | Jobs won | |
|---|---|---|
| Jan | 12 | 6 |
| Feb | 19 | 9 |
| Mar | 15 | 8 |
| Apr | 25 | 14 |
| May | 22 | 13 |
| Jun | 30 | 18 |
This is the real element, running with its sample content.
Smooth curves, a filled area under the line, stepped lines or stacked series.
Set the point size and line width for each chart.
Titles for both axes, grid lines on or off, optional minimum and maximum, and start at zero.
The chart draws when scrolled into view, with duration you control.
Add it to your page in 3 steps
Open your page in Breakdance
In WordPress, go to Pages, hover over your page and click Edit with Breakdance.
Open the element panel
Click the plus button at the top left, then open the BreakUI Pro group and find Line Chart.
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.
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.
The main settings
Select the element in Breakdance. Everything lives in two tabs.
Your text, items, links and behavior. Change the sample content and you are done.
Colors, typography, borders, spacing and layout, with the normal Breakdance controls.
Set the width in percent, pixels, em, rem, vw or vh, plus max width, min width and alignment.
See it in action
Real renders of the element with different settings.
Results overview
| Leads | Jobs won | |
|---|---|---|
| Jan | 12 | 6 |
| Feb | 19 | 9 |
| Mar | 15 | 8 |
| Apr | 25 | 14 |
| May | 22 | 13 |
| Jun | 30 | 18 |
Smooth curves with fill
Style it your way
The Design tab has these groups. Everything uses the normal Breakdance design controls.
Set Start Value Axis At Zero off when the values are close together.
Add axis titles so the chart reads without a caption.