Diverging Survey Bars

About this block

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.

When to use

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

• Kpi cards row

After

• Data table
• Reports

What you can display

One strong use is the onboarding survey sentiment panel. Other diverging reads:

• Employee pulse. Agreement per statement across a quarterly engagement survey.
• Feature satisfaction. Sentiment per feature after a release, positive right and negative left.
• NPS drivers. Detractor to promoter split per reason category around a shared center.

Tip: leave neutral out of the bars and note it in the footnote so the diverging halves stay easy to compare.