Skip to main content

​
Overview

JStatCard is a specialized card component for displaying statistics and metrics with:
  • Animated number transitions
  • Customizable prefix/suffix (e.g., ”$”, ”%”)
  • Decimal place formatting
  • Thousand separators
  • Icon with color variants
  • Trend indicators (positive/negative)

​
Constructor

​
JStatCard()
constructor
Creates a new stat card with default settings.

​
Basic Usage

JStatCard card = new JStatCard();
card.setTitle("Total Revenue");
card.setValue(45230.50);
card.setPrefix("$");
card.setDecimalPlaces(2);
card.setTrend("+12.5% from last month", true);

JIcon icon = new JIcon("dollar-sign");
card.setIcon(icon.view(), "success");

​
Title and Content

​
setTitle(title)
void
Sets the card title text displayed at the top.

​
Value Display

​
setValue(targetValue)
void
Sets the card value with default 1-second animation.
card.setValue(1234.56); // Animates from current to 1234.56
​
setValue(targetValue, durationMs)
void
Sets the card value with custom animation duration.
card.setValue(5000, 2000); // Animate to 5000 over 2 seconds

​
Number Formatting

​
setPrefix(prefix)
void
Sets a prefix to display before the value (e.g., ”$”, ”€”).
card.setPrefix("$");  // Displays "$1,234"
card.setPrefix("€");  // Displays "€1,234"
​
setSuffix(suffix)
void
Sets a suffix to display after the value (e.g., ”%”, “kg”, “users”).
card.setSuffix("%");      // Displays "85%"
card.setSuffix(" users"); // Displays "1,234 users"
​
setDecimalPlaces(places)
void
Sets the number of decimal places to display.
card.setDecimalPlaces(0);  // "1,234"
card.setDecimalPlaces(2);  // "1,234.56"
card.setDecimalPlaces(3);  // "1,234.567"

​
Icon

​
setIcon(icon, colorClass)
void
Sets an icon with optional color variant displayed in the top-right.
JIcon dollarIcon = new JIcon("dollar-sign");
card.setIcon(dollarIcon.view(), "success");

// Remove icon
card.setIcon(null, null);

​
Trend Indicator

​
setTrend(text, isPositive)
void
Sets a trend indicator text with positive/negative styling.
card.setTrend("+12.5% from last month", true);  // Green text
card.setTrend("-3.2% from last week", false);   // Red text
card.setTrend(null, false);                      // Hide trend

​
Complete Example

// Revenue card
JStatCard revenueCard = new JStatCard();
revenueCard.setTitle("Monthly Revenue");
revenueCard.setPrefix("$");
revenueCard.setDecimalPlaces(2);
revenueCard.setValue(45230.50);
revenueCard.setTrend("+12.5% vs last month", true);
JIcon dollarIcon = new JIcon("dollar-sign");
revenueCard.setIcon(dollarIcon.view(), "success");

// Users card
JStatCard usersCard = new JStatCard();
usersCard.setTitle("Active Users");
usersCard.setValue(8234);
usersCard.setTrend("+342 this week", true);
JIcon usersIcon = new JIcon("users");
usersCard.setIcon(usersIcon.view(), "primary");

// Conversion rate card
JStatCard conversionCard = new JStatCard();
conversionCard.setTitle("Conversion Rate");
conversionCard.setSuffix("%");
conversionCard.setDecimalPlaces(1);
conversionCard.setValue(3.24);
conversionCard.setTrend("-0.3% vs last month", false);
JIcon chartIcon = new JIcon("trending-up");
conversionCard.setIcon(chartIcon.view(), "warning");

// Layout in dashboard
HBox statsRow = new HBox(16, revenueCard, usersCard, conversionCard);

​
Animation Behavior

The value animates smoothly using JavaFX Timeline:
  • Default animation: 1000ms (1 second)
  • Custom duration can be specified
  • Interrupts previous animation if still running
  • Formats value on every animation frame with thousand separators
  • Supports prefix, suffix, and decimal places during animation
// Smooth animation from 0 to target
card.setValue(0);
card.setValue(10000, 2000); // Counts up over 2 seconds

Build docs developers (and LLMs) love

Get started for freeTalk to us