SentimentBar

Positive/neutral/negative breakdown

Overview

SentimentBar displays sentiment distribution as a horizontal bar showing positive, neutral, and negative proportions. Supports multiple display variants with optional percentages, counts, and legend. Perfect for visualizing sentiment analysis results from feedback or survey responses.

Features

Three display variants: bar, stacked, segments
Show percentages or raw counts
Optional legend
Three size options
Color-coded sections (green, gray, red)

Examples

Basic SentimentBar

Simple sentiment distribution

Positive65%

Neutral25%

Negative10%

With Percentages

Showing percentage labels

Positive60%

Neutral23%

Negative18%

With Counts

Showing raw count values

Positive63% (820)

Neutral26% (340)

Negative11% (140)

With Legend

With color legend

Positive65%

Neutral25%

Negative10%

Stacked Variant

Stacked bar variant

Positive60%

Neutral23%

Negative18%

Segments Variant

Separate segments variant

Positive

75%

Neutral

15%

Negative

10%

Size Variants

Different size options

Small

Positive65%

Neutral25%

Negative10%

Medium (default)

Positive65%

Neutral25%

Negative10%

Large

Positive65%

Neutral25%

Negative10%

Distribution Examples

Various sentiment distributions

Mostly Positive

Positive85%

Neutral10%

Negative5%

Balanced

Positive35%

Neutral30%

Negative35%

Mostly Negative

Positive15%

Neutral20%

Negative65%

With ChartCard

Wrapped in ChartCard

Feedback Sentiment

Analysis of 1,300 feedback responses

Positive63% (820)

Neutral26% (340)

Negative11% (140)

Props Reference

Prop	Type	Default	Description
`positive`	`number`	`required`	Positive sentiment count
`neutral`	`number`	`required`	Neutral sentiment count
`negative`	`number`	`required`	Negative sentiment count
`showPercentages`	`boolean`	`false`	Show percentage labels
`showCounts`	`boolean`	`false`	Show raw count values
`variant`	`'bar' \| 'stacked' \| 'segments'`	`'bar'`	Display variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Bar height
`showLegend`	`boolean`	`false`	Show color legend
`className`	`string`	`-`	Additional CSS classes

Usage

import { SentimentBar, ChartCard } from '@/ui/components/charts';

// Basic sentiment bar
<SentimentBar positive={65} neutral={25} negative={10} />

// With percentages and legend
<SentimentBar
  positive={120}
  neutral={45}
  negative={35}
  showPercentages
  showLegend
/>

// Stacked variant with counts
<ChartCard title="Feedback Sentiment">
  <SentimentBar
    positive={820}
    neutral={340}
    negative={140}
    variant="stacked"
    showCounts
    showLegend
  />
</ChartCard>

Prop

Type

Default

Description

positive

number

required

Positive sentiment count

neutral

number

required

Neutral sentiment count

negative

number

required

Negative sentiment count

showPercentages

boolean

false

Show percentage labels

showCounts

boolean

false

Show raw count values

variant

'bar' | 'stacked' | 'segments'

'bar'

Display variant

size

'sm' | 'md' | 'lg'

'md'

Bar height

showLegend

boolean

false

Show color legend

className

string

-

Additional CSS classes

import { SentimentBar, ChartCard } from '@/ui/components/charts'; // Basic sentiment bar <SentimentBar positive={65} neutral={25} negative={10} /> // With percentages and legend <SentimentBar positive={120} neutral={45} negative={35} showPercentages showLegend /> // Stacked variant with counts <ChartCard title="Feedback Sentiment"> <SentimentBar positive={820} neutral={340} negative={140} variant="stacked" showCounts showLegend /> </ChartCard>