Overview
RatingDistribution visualizes how responses are distributed across a rating scale. Perfect for analyzing survey ratings, NPS responses, and Likert scale questions.
Features
- Support for stars, NPS, Likert, and numeric scales
- Horizontal and vertical orientations
- Gradient or semantic color schemes
- Show percentages and/or counts
- Highlight modes (majority, extremes)
- Clickable bars for drill-down
Examples
Star Ratings
5-star rating breakdown
Product Ratings
500 total reviews
5
219(44%)
4
156(31%)
3
85(17%)
2
28(6%)
1
12(2%)
Likert Scale
Agreement scale with custom labels
Survey Response
Strongly Agree
156(39%)
Agree
124(31%)
Neutral
67(17%)
Disagree
35(9%)
Strongly Disagree
18(5%)
NPS Distribution
0-10 NPS scale breakdown
Net Promoter Score
400 responses
10
111(28%)
9
89(22%)
8
62(16%)
7
45(11%)
6
28(7%)
5
22(6%)
4
15(4%)
3
12(3%)
2
8(2%)
1
3(1%)
0
5(1%)
Vertical Orientation
Compact vertical display
Quick View
Highlight Modes
Visual emphasis options
Highlight Majority
5
219
4
156
3
85
2
28
1
12
Highlight Extremes
5
219
4
156
3
85
2
28
1
12
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | RatingDataPoint[] | required | Array with rating and count |
type | "stars" | "nps" | "likert" | "numeric" | "numeric" | Rating scale type for styling |
orientation | "horizontal" | "vertical" | "horizontal" | Bar orientation |
showPercentages | boolean | false | Show percentage labels |
showCounts | boolean | true | Show count labels |
colorScheme | "gradient" | "semantic" | "gradient" | Bar color scheme |
highlightMode | "none" | "extremes" | "majority" | "none" | Visual emphasis mode |
onBarClick | (rating: number) => void | - | Click handler for bars |
Usage
import { RatingDistribution, ChartCard } from '@/ui/components/charts';
// Basic star rating distribution
<ChartCard title="Product Ratings" height="auto">
<RatingDistribution
data={[
{ rating: 1, count: 12 },
{ rating: 2, count: 28 },
{ rating: 3, count: 85 },
{ rating: 4, count: 156 },
{ rating: 5, count: 219 },
]}
type="stars"
showPercentages
/>
</ChartCard>
// Likert scale with custom labels
<RatingDistribution
data={likertData}
type="likert"
showCounts
showPercentages
/>
// Vertical orientation
<RatingDistribution
data={starRatings}
orientation="vertical"
colorScheme="semantic"
/>
// With click handler
<RatingDistribution
data={starRatings}
type="stars"
highlightMode="majority"
onBarClick={(rating) => console.log(`Clicked rating ${rating}`)}
/>