Diverging Survey Bars
Likert survey responses as diverging stacked bars around a center axis with a four segment legend and agree share per question.
Likert survey responses as diverging stacked bars around a center axis with a four segment legend and agree share per question.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Diverging Survey Bars renders Likert results as stacked bars that split at a shared center line: strongly disagree and disagree segments extend left, agree and strongly agree extend right, one row per question across five questions. Each row ends with its combined agree share, from 78% on "Setup was easy" down to 56% on "Support responds quickly", and the header callout names the overall agree rate, 69% across 312 responses.
The block is pure CSS widths from a fixed data array, no chart library, with the four response levels colored from chart tokens. Each response percentage maps to a width within its half of the row, so swapping in your survey tallies is a single array update. Neutral responses are left out of the bars and make up the remainder of each row.
Reach for this block on a research, feedback, or product analytics page where the team needs to read sentiment per question at a glance. Wire the rows to your survey export grouped by question, with the four agreement levels as percentages of total responses.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the onboarding survey sentiment panel. Other diverging reads:
Tip: leave neutral out of the bars and note it in the footnote so the diverging halves stay easy to compare.