F1Carbon

Charts, gauges, progress bars, and data visualization components

LINE CHART

<StockLineChart>stock-line-chart.tsx

DEFAULT — UP

DEFAULT — DOWN

AREA — UP

AREA — DOWN

SMALL

MEDIUM

LARGE

STOCK CARD

<StockCard>stock-card.tsx

AMZNAmazon

$420.00$42.06, 11.34%

MSFTMicrosoft

$359.84$13.27, 3.56%

AMZNAmazon

$420.00$42.06, 11.34%

AMZNAmazon

$420.00$42.06, 11.34%

AMZNAmazon

$420.00$42.06, 11.34%

COMPARE CHART

<CompareCard>compare-card.tsx

MCDMcDonut

50.18%

QQQNASDAQ

20.77%

MCDMcDonut

50.18%

QQQNASDAQ

20.77%

AAPLApple

-90.00%

MSFTMicrosoft

280.00%

SPARK CHART

<SparkChart>spark-chart.tsx

AREA CHART

Small (w-20)

Default (w-28)

Wide (w-36)

Negative

LINE CHART

Small (w-20)

Default (w-28)

Multi-series

BAR CHART

Default

Wide

BAR CHART

<BarChart>bar-chart.tsx

CLEAN, NO AXES

ROUNDED BARS

END BORDER STYLE

DIAGONAL PATTERN FILL

MULTI-SERIES (ROUNDED)

Revenue
Profit

MIXED FILL + PATTERN

Revenue
Profit

STACKED BAR CHART

Revenue
Profit

PERCENTAGE STACKED

Large Cap
Mid Cap
Small Cap

NEGATIVE VALUES (ROUNDED)

Gains
Losses

COMPACT VIEW (START/END ONLY)

FIXED WIDTH BARS (4PX)

WITH AXIS LABELS

Revenue
Profit

COMBO CHART

<ComboChart>combo-chart.tsx

ISP METRICS (24H)

LOADING STATE

Loading…

PROGRESS ASSET

<ProgbarAssetBase>progbar-asset-base.tsx

SIMPLE

PROGBAR SIMPLE POS

EX: TOP BUY/SELL

60%

PROGBAR SIMPLE NEG

EX: TOP BUY/SELL

60%

PROGBAR TICKED POS

EX: TOP HELD

60%

PROGBAR TICKED NEG

EX: TOP HELD

60%

DIRECTIONAL

PROGBAR ABSOLUTE

EX: TOP TRADED

33%

66%

PROGBAR NET POS

EX: TOP MOVERS

50%

PROGBAR NET NEG

EX: TOP MOVERS

50%

RATIO

PROGBAR RATIO POS/NEG

EX: BUY/SELL

65%

35%

PROGBAR RATIO NEG/POS

EX: PUT/CALL

65%

35%

RANGE

PROGBAR RANGE POS

EX: 52-WEEK RANGE

40%85%

PROGBAR RANGE NEG

EX: 52-WEEK RANGE

15%60%

PROGBAR RANGE GRAD-POS

EX: 52-WEEK RANGE

40%85%

PROGBAR RANGE GRAD-NEG

EX: 52-WEEK RANGE

15%60%

ASSET BARS WITH LABELS

Default: indicator position, hoverColor visibility

Positive Asset

75%

Negative Asset

45%

Warning Asset

60%

CUSTOM LABEL OPTIONS

Override defaults as needed

Always Visible

55%

End Position

80%

RTL with Label

40%

BUY/SELL RATIOS

Market sentiment indicators

Bullish sentiment

Buy 75%

Sell 25%

Balanced market

Buy 50%

Sell 50%

Bearish sentiment

Buy 25%

Sell 75%

PUT/CALL RATIOS

Options flow analysis

High put volume

Put 70%

Call 30%

Balanced options

Put 50%

Call 50%

High call volume

Put 20%

Call 80%

52-WEEK RANGES

Hover over markers to see current price

AAPL: $140 - $190

$140$190

TSLA: $100 - $300

$100$300

MSFT: $250 - $380

$250$380

PERFORMANCE METRICS

Target ranges with current values

Risk Score (Target: 20-40)

Drawdown (Limit: 5-15%)

Utilization (Optimal: 60-80%)

DONUT

<DonutChart> / <DonutAllocation>donut-chart.tsx

DEFAULT

WITH CENTER LABEL

PIE (NO HOLE)

WITH FORMATTER

HOVER HIGHLIGHT

DONUT ALLOCATION WITH LEGEND

NARROW, SM

Donut (sm) + LabelLegend (sm)

65%Stocks

NARROW, MD

Donut (md) + LabelLegend (md)

65%Stocks

NARROW, LG

Donut (lg)

65%Stocks

MID, SM

Donut (sm) + LabelLegend (sm)

65%Stocks

MID, MD

Donut (md) + LabelLegend (md)

65%Stocks

GAUGE

<GaugeSentiment> / <GaugeRisk>gauge-sentiment.tsx

NARROW (THIRD WIDTH)

NARROW SENTIMENT

Width: narrow, with labels

34%

FEAR

MAX FEAR

MAX GREED

NARROW RISK

Width: narrow, with labels

52%

RISK NEUTRAL

MIN RISK

MAX RISK

MID (HALF WIDTH)

MID SENTIMENT

Width: mid (default), with labels

88%

MAX GREED

MAX FEAR

MAX GREED

MID RISK

Width: mid, with labels

80%

RISK ON!

MIN RISK

MAX RISK

TRACKER

<Tracker>tracker.tsx

30-DAY UPTIME

7-DAY (WEEKLY VIEW)