Proportion Bar turns a list of values into a stacked bar, a 10 by 10 waffle or a range track. Percentages are worked out on the server and always add up to 100. Use it for budgets, survey results, shares and simple project plans.
A budget bar with a fixed total, a waffle chart of survey results and a year plan on a range track.
A fixed total of £2,400 with four segments. The £240 left over shows as the track and gets its own Unallocated row in the legend, with values and percentages.
Each cell is one per cent. The fifth segment uses the hollow outline style from the default palette.
Twelve monthly units with month labels, set out as a Gantt chart. The Winter sale runs from November to February, so it wraps round to the start of the track.
Pick a mode, add your segments and choose how the legend looks.
Choose Bar, Waffle (10 x 10) or Range Track, and give the chart an accessible title.
Enter a label and value for each segment, or a start unit and length in range mode. Add display text such as £480 if you want it shown instead of the number.
Show the legend below or to the right, with values, percentages or both. Colours come from your site unless you set your own.
One element, three ways to show parts of a whole.
A stacked bar, a 10 by 10 waffle where each cell is one per cent, or a range track split into units.
Rounded percentages use largest remainder rounding, so the legend always totals exactly 100%.
Set a fixed total and the gap between it and your segments shows as the track, with its own legend row.
In range mode, give each segment its own row with a label. Ranges that run past the last unit wrap round to the start.
Place the legend below or to the right, show values, percentages or both, and pick square, rounded, circle or short bar swatches.
Four default colours and a hollow outline style follow your brand and heading colours. Any segment can have its own colour.
The chart has an image role and a label that reads out every segment with its percentage or dates.
All maths happens in PHP, so the chart is complete with JavaScript off and adds no script to the page.
The title, segment labels, values, display text and fixed total all accept dynamic data from custom fields.
Anywhere a number makes more sense as part of a whole.
Show where money goes each month, with an unallocated remainder.
Present answers from a poll or study as a waffle that is easy to read at a glance.
Show how each donation is split between programmes, admin and fundraising.
Lay out phases across months or weeks as a simple Gantt chart.
Mark opening seasons, planting times or campaigns across the year, even when they cross December.
Show ingredients, materials or storage use as a share of the total.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Chart | ||
| Mode | Bar, Waffle (10 x 10) or Range Track. | Bar |
| Accessible Title | Describes the chart for screen readers. | Where every £100 goes |
| Total | Auto (sum of segments) or Fixed. Not used in range mode. | Auto |
| Fixed Total | The whole the segments are measured against. If it is smaller than the sum, the sum is used. | 100 |
| Remainder Label | Legend label for the part of a fixed total not covered by segments. | Unallocated |
| Segments | ||
| Label | The segment name, shown in the legend and in range row labels. | — |
| Value | The segment amount. Bar and waffle modes. | — |
| Display Text | Text shown instead of the raw value, e.g. £58. | — |
| Start Unit | Where the segment starts on the range track (1 to 60). | — |
| Length (Units) | How many units the segment covers (1 to 60). | — |
| Colour (optional) | A colour for this segment instead of the palette. | — |
| Hollow Style | Draw the segment as an outline instead of a fill. | Off |
| Range Track | ||
| Number Of Units | How many units the track is split into, up to 60. | 12 |
| Unit Labels | Comma separated labels shown under the track. | J,F,M,A,M,J,J,A,S,O,N,D |
| One Row Per Segment (Gantt) | Give each segment its own row with a label. | Off |
| Display | ||
| Show Values Inside Segments | Print display text or the percentage inside each segment. Not used in waffle mode. | On |
| Show Legend | Show the legend. | On |
| Legend Position | Below or Right. | Below |
| Legend Shows Value | Add each value, or the date range in range mode. | On |
| Legend Shows Percentage | Add each percentage. Not used in range mode. | On |
| Percentage Decimals | 0, 1 or 2 decimal places. | 0 |
| Bar & Track | ||
| Bar Height | Height of the bar and the range track rows. | 36px |
| Gap Between Segments | Space between segments. | 3px |
| Outer Radius | Corner radius of the ends of the bar. | 8px |
| Segment Radius | Corner radius of each segment. | 3px |
| Track / Remainder Colour | Colour of the empty track, remainder and empty waffle cells. | Heading colour at 10% |
| Hollow Outline Width | Line width for hollow segments. | 2px |
| Default Palette | ||
| Colour 1 to 4 | Used in order for segments without their own colour, then a hollow outline, repeating. | Brand and heading colours |
| Hollow Outline Colour | Colour of the fifth, hollow slot. | Heading colour |
| Text On Filled Segments | Text colour inside filled segments. | #fff |
| Segment Text | ||
| Typography | Text style inside segments. | — |
| Side Padding | Space either side of text inside a segment. | 0.5em |
| Legend | ||
| Label and Value Typography | Text styles for legend labels and values. | — |
| Swatch Size | Size of each legend swatch. | 12px |
| Swatch Shape | Square, Rounded, Circle or Short Bar. | Rounded |
| Gap Between Items | Space between legend items. | 8px 20px |
| Space From Chart | Space between the chart and the legend. | 16px |
| Waffle | ||
| Cell Size | Maximum size of each cell. | 22px |
| Cell Gap | Space between cells. | 4px |
| Cell Radius | Corner radius of each cell. | 3px |
| Range Track (design) | ||
| Unit Labels and Row Label Typography | Text styles for the labels under the track and the row labels. | — |
| Space Above Unit Labels | Gap between the track and its labels. | 0px |
| Space After Row Labels | Gap between row labels and the track. | 0.75em |
| Gap Between Rows | Space between Gantt rows. | 8px |
| Spacing | ||
| Margin | Top and bottom margin. | — |
Yes. Rounded percentages are shared out with largest remainder rounding, so the numbers in the legend add up to exactly 100%, with any decimals you choose.
The chart cannot fit the segments into it, so it uses the sum of the segments as the total instead.
Yes. If a segment starts in November and runs for four months, it is drawn from November to December and then again from January to February.
No. Every width, cell and position is worked out on the server, so the chart shows as soon as the HTML loads.
Yes. The title, segment labels, values, display text and fixed total all accept dynamic data.
The chart has role img and a label that lists every segment with its percentage, or its start and end units in range mode. The legend is a normal list.
Proportion Bar is included with Phox Elements, along with 140+ other premium elements for Breakdance.