SentimentTrend

Sentiment changes over time

Overview

SentimentTrend displays sentiment distribution changes over time as a stacked area chart. Shows positive, neutral, and negative sentiment proportions with optional normalization to 100%. Built on Recharts AreaChart. Perfect for tracking sentiment shifts across product launches, campaigns, or ongoing feedback collection.

Features

Stacked area visualization
Optional 100% normalization
Interactive tooltips
Optional grid lines
Optional legend
Color-coded sentiment areas

Examples

Basic SentimentTrend

Monthly sentiment over a year

With Grid and Legend

With grid lines and legend

Normalized View

Normalized to 100%

Weekly Trend

Weekly sentiment improvement

Custom Height

Taller chart for detailed view

With ChartCard

Wrapped in ChartCard

Sentiment Trend

Monthly sentiment analysis from customer feedback

View Comparison

Absolute vs normalized comparison

Absolute Values

Normalized (100%)

Props Reference

Prop	Type	Default	Description
`data`	`SentimentDataPoint[]`	`required`	Array of {date, positive, neutral, negative} objects
`normalized`	`boolean`	`false`	Normalize to 100% stacked view
`showGrid`	`boolean`	`false`	Show grid lines
`showLegend`	`boolean`	`false`	Show color legend
`height`	`number`	`300`	Chart height in pixels
`className`	`string`	`-`	Additional CSS classes

Data Format

interface SentimentDataPoint {
  date: string;      // X-axis label (e.g., "Jan", "Week 1")
  positive: number;  // Positive sentiment count
  neutral: number;   // Neutral sentiment count
  negative: number;  // Negative sentiment count
}

Usage

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

// Sentiment trend over time
<ChartCard title="Sentiment Over Time">
  <SentimentTrend
    data={[
      { date: '2024-01', positive: 65, neutral: 25, negative: 10 },
      { date: '2024-02', positive: 70, neutral: 20, negative: 10 },
      { date: '2024-03', positive: 62, neutral: 28, negative: 10 },
      // More data points...
    ]}
    showLegend
    showGrid
  />
</ChartCard>

// Normalized (100% stacked)
<SentimentTrend data={data} normalized />

Prop

Type

Default

Description

data

SentimentDataPoint[]

required

Array of {date, positive, neutral, negative} objects

normalized

boolean

false

Normalize to 100% stacked view

showGrid

boolean

false

Show grid lines

showLegend

boolean

false

Show color legend

height

number

300

Chart height in pixels

className

string

-

Additional CSS classes

interface SentimentDataPoint { date: string; // X-axis label (e.g., "Jan", "Week 1") positive: number; // Positive sentiment count neutral: number; // Neutral sentiment count negative: number; // Negative sentiment count }

import { SentimentTrend, ChartCard } from '@/ui/components/charts'; // Sentiment trend over time <ChartCard title="Sentiment Over Time"> <SentimentTrend data={[ { date: '2024-01', positive: 65, neutral: 25, negative: 10 }, { date: '2024-02', positive: 70, neutral: 20, negative: 10 }, { date: '2024-03', positive: 62, neutral: 28, negative: 10 }, // More data points... ]} showLegend showGrid /> </ChartCard> // Normalized (100% stacked) <SentimentTrend data={data} normalized />