Open experiment
Anomaly pulse chart
Highlights unusual spikes in a compact monitoring trace with severity and event context. Anomaly markers are buttons that select an event and reveal cause, time, and severity. Focuses on exceptional events and diagnostic annotations rather than general trend magnitude.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-anomaly-pulse-chart cmp-atlas" data-state="idle" data-variant="1">
<header>
<span>Monitoring charts</span
><button type="button" data-primary aria-pressed="false">Live view</button>
</header>
<div class="cmp-atlas__metric"><b>42k</b><span data-output>+12.8% this cycle</span></div>
<div class="cmp-atlas__chart">
<button
style="--i: 0; --v: 35"
type="button"
data-choice="0"
aria-pressed="true"
aria-label="Inspect data point 1"
></button
><button
style="--i: 1; --v: 52"
type="button"
data-choice="1"
aria-pressed="false"
aria-label="Inspect data point 2"
></button
><button
style="--i: 2; --v: 69"
type="button"
data-choice="2"
aria-pressed="false"
aria-label="Inspect data point 3"
></button
><button
style="--i: 3; --v: 86"
type="button"
data-choice="3"
aria-pressed="false"
aria-label="Inspect data point 4"
></button
><button
style="--i: 4; --v: 42"
type="button"
data-choice="4"
aria-pressed="false"
aria-label="Inspect data point 5"
></button
><button
style="--i: 5; --v: 59"
type="button"
data-choice="5"
aria-pressed="false"
aria-label="Inspect data point 6"
></button
><button
style="--i: 6; --v: 76"
type="button"
data-choice="6"
aria-pressed="false"
aria-label="Inspect data point 7"
></button
><button
style="--i: 7; --v: 93"
type="button"
data-choice="7"
aria-pressed="false"
aria-label="Inspect data point 8"
></button
><button
style="--i: 8; --v: 49"
type="button"
data-choice="8"
aria-pressed="false"
aria-label="Inspect data point 9"
></button
><button
style="--i: 9; --v: 66"
type="button"
data-choice="9"
aria-pressed="false"
aria-label="Inspect data point 10"
></button
><button
style="--i: 10; --v: 83"
type="button"
data-choice="10"
aria-pressed="false"
aria-label="Inspect data point 11"
></button
><button
style="--i: 11; --v: 39"
type="button"
data-choice="11"
aria-pressed="false"
aria-label="Inspect data point 12"
></button>
</div>
<div class="cmp-atlas__choices">
<button type="button" data-choice="0" aria-pressed="true">Now</button
><button type="button" data-choice="1" aria-pressed="false">7 days</button
><button type="button" data-choice="2" aria-pressed="false">30 days</button>
</div>
<p data-status aria-live="polite">Current data view selected</p>
</article>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Every interactive target is a labelled native control with a visible focus treatment.
- State changes are communicated through a polite text status and never by color alone.
- The contained visual effects stop when the user requests reduced motion.
License: MIT License for open-source use, modification, and distribution.