Diverging Sentiment Chart React component
Five-point survey results around a zero line: negative opens left, positive opens right, neutral sits across the middle, and topics sort themselves by net score.
About the Diverging Sentiment Chart component
Diverging Sentiment Chart shows survey answers the way people actually read them. Negative answers open to the left of a zero line, positive answers open to the right, and neutral sits across the middle, so the balance of each topic is visible before you read a number.
Topics sort themselves by net score. Switch survey and the bars resize while the rows glide to their new order, which makes what got better and what got worse easy to spot.
When to use it
Use it for five-point results like satisfaction surveys, NPS follow-ups, employee feedback and product reviews.
For yes or no answers, a simple percentage bar is enough.
Installation
Add the Diverging Sentiment Chart component to your project with the shadcn CLI. It lands in components/diverging-sentiment-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/diverging-sentiment-chartProps
<DivergingSentimentChart /> accepts 11 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Customer sentiment" |
| subtitle | string | "How people feel about each part of the product." |
| topics | { label: string; splits: SentimentSplit[] }[] | TOPICS |
| periods | string[] | PERIODS |
| defaultPeriod Index of the period shown first. Defaults to the latest. | number | — |
| levels Names of the five levels, from most negative to most positive. | [string, string, string, string, string] | LEVELS |
| positive Colour of the positive side. | string | — |
| negative Colour of the negative side. | string | — |
| rowHeight Height of each row, in px. | number | 38 |
| onPeriodChange | (period: string) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Customer sentiment"
- subtitlestringDefault: "How people feel about each part of the product."
- topics{ label: string; splits: SentimentSplit[] }[]Default: TOPICS
- periodsstring[]Default: PERIODS
- defaultPeriod
Index of the period shown first. Defaults to the latest.
number - levels
Names of the five levels, from most negative to most positive.
[string, string, string, string, string]Default: LEVELS - positive
Colour of the positive side.
string - negative
Colour of the negative side.
string - rowHeight
Height of each row, in px.
numberDefault: 38 - onPeriodChange(period: string) => void
Diverging Sentiment Chart FAQ
- What goes in each split?
- Five percentages that add up to 100, from very negative to very positive.
- How is the net score worked out?
- Positive and very positive, minus negative and very negative. Neutral answers don't count either way.
- Can I change the colours?
- Yes, with positive and negative. Orange and indigo are the defaults because they stay distinct for most kinds of colour blindness.
- Can I rename the levels?
- Yes. Pass levels with five names, such as Strongly disagree to Strongly agree.
