← Components
Data
Stats, charts, trends, and key-value displays for presenting metrics.
How data & data-metric relate →DataChartUIFull Chart.js wrapper supporting line and bar charts with auto-formatted axes.
DataKeyValKey-value pair with grey label above and semi-bold value below.
DataPercentBarWraps UxPercentBar with compact-formatted total text and percent-width bar.
DataSparkChartSmall inline line chart rendered via Chart.js with configurable fill and stroke.
DataSparkChartOldLegacy SVG-based spark chart using svgMachine. Renders a polygon/polyline with scaleY flip.
DataStatLarge numeric statistic with label, formatted value, loading spinner, and optional health coloring.
DataTimelineX-axis timeline with vertical gridlines and time labels for different timeframes.
DataTrendDirectionDisplays a trend value with +/- prefix and a directional triangle icon.
DataValMetric card with label, formatted value, inline slot, health coloring, and optional radio-button mode.
DataYAxisY-axis ruler overlay with evenly-spaced stop labels.