Loading...

Good things come to those who wait...

Home Vocabulary Voice Colors Icons Components Charts Blocks Layouts Composed

Charts & Visualization

Data visualization components for dashboards and analytics

Wrappers & Building Blocks

Wrapper for consistent chart presentation

Enhanced KPI display with sparklines and trends

Inline mini trend visualization

Standard Charts

Multi-series trend lines over time

Vertical/horizontal bar comparisons

Proportional segments with center metric

Circular progress indicator with thresholds

Multi-dimensional scoring comparison

StackedAreaChart

Composition changes over time

Statistical Distribution

Continuous data frequency distribution

Distribution with quartiles and outliers

Correlation analysis visualization

SummaryStatsCard

Statistical summary (mean, median, std dev)

Comparison & Prioritization

Side-by-side metric comparison

LeaderboardList

Ranked list with avatars and trends

Two-group side-by-side comparison

Value accumulation and breakdown

ImpactEffortQuadrant

2x2 prioritization matrix

Activity Patterns & Heatmaps

Calendar-style activity visualization

AvailabilityHeatmap

Activity patterns by hour and day

Retention analysis by cohort over time

EngagementScoreGauge

Multi-factor engagement score display

Funnel & Journey

Conversion funnel with drop-off rates

Page-by-page abandonment visualization

Pipeline visualization with stage progress

ParticipantJourney

User touchpoint timeline visualization

Survey & Rating Analysis

RatingDistribution

Rating scale breakdown with bar visualization

Net Promoter Score gauge with breakdown

Multi-question survey response grid

SurveyHealthCard

Survey health overview with key metrics

Insight score distribution chart

ResponseVelocity

Response rate over time with target

Insight Management

AI-generated insight display

InsightTimeline

Chronological insight stream with filtering

InsightClusterMap

AI-grouped related insights network

InsightStatusBoard

Kanban-style insight status visualization

InsightVelocityChart

Insight submission rate with quality

DiscussionSummary

Thread summary with sentiment and contributors

Sentiment & Text Analysis

Positive/neutral/negative breakdown

Sentiment changes over time

Keyword frequency visualization

AI & Agent Intelligence

AIConfidenceIndicator

Confidence badge for AI outputs

AgentActivityStream

AI agent action timeline

RecommendationCard

AI-suggested action with confidence

PredictionAccuracy

Historical AI prediction performance

Non-chart UI components like forms, navigation, and utilities

Usage

Import chart components from @/ui/components/charts. All charts follow Ditto theming and support loading states.

import { ChartCard, MetricCard, LineChart, BarChart, DonutChart } from '@/ui/components/charts';