Health Indicators

Visual health scores for accounts and deals — at a glance, how are things going?

Circular Progress Ring

Health Scores

Healthy

At Risk

Critical

HTML

<div class="monarch-health-ring monarch-health-ring-lg">
  <svg class="monarch-health-ring__svg" viewBox="0 0 36 36">
    <path class="monarch-health-ring__track" d="M18 2.08..." stroke-width="3" />
    <path class="monarch-health-ring__fill monarch-health-ring__fill--healthy" stroke-width="3" stroke-dasharray="81, 100" />
  </svg>
  <span class="monarch-health-ring__value" style="color: #22C55E;">81</span>
</div>

Compact Inline

Inline Health Scores

The Kitchen Source - Dallas $2.4M pipeline

Baltix Construction $154K pipeline

HTML

<div class="monarch-health-ring monarch-health-ring-sm">...</div>

Color Thresholds

Score Range	Color	Status
70–100	Green	Healthy
40–69	Amber	At Risk
0–39	Red	Critical