Sparkline

<!-- Default line sparkline -->
<rhx-sparkline rhx-values="new[] { 23, 45, 67, 34, 56, 78, 45, 89 }"
               rhx-label="CPU history" />

<!-- Custom stroke color and width -->
<rhx-sparkline rhx-values="new[] { 142.5, 145.2, 143.8, 148.1, 150.6 }"
               rhx-stroke-color="#6366f1"
               rhx-stroke-width="3"
               rhx-label="Stock price trend" />

<!-- Custom size -->
<rhx-sparkline rhx-values="new[] { 18, 19, 21, 24, 26, 28, 30, 29 }"
               rhx-width="300px"
               rhx-height="3rem"
               rhx-stroke-color="#f59e0b"
               rhx-label="Daily temperatures" />

<!-- Area with auto fill (stroke color at 20% opacity) -->
<rhx-sparkline rhx-values="new[] { 120, 200, 150, 80, 230, 180, 260 }"
               rhx-type="area"
               rhx-stroke-color="#10b981"
               rhx-label="Monthly sales" />

<!-- Area with custom fill color -->
<rhx-sparkline rhx-values="new[] { 23, 45, 67, 34, 56, 78, 45, 89 }"
               rhx-type="area"
               rhx-stroke-color="#3b82f6"
               rhx-fill-color="#3b82f633"
               rhx-label="CPU usage area chart" />

<!-- Bar chart with custom fill -->
<rhx-sparkline rhx-values="new[] { 8, 6, 9, 7, 5, 8, 10, 6, 7, 9 }"
               rhx-type="bar"
               rhx-fill-color="#3b82f6"
               rhx-label="Score distribution" />

<!-- Bar chart with default fill (uses stroke color) -->
<rhx-sparkline rhx-values="new[] { 120, 200, 150, 80, 230, 180, 260 }"
               rhx-type="bar"
               rhx-stroke-color="#8b5cf6"
               rhx-label="Monthly sales bars" />

<!-- Fixed Y-axis range: 0 to 100 -->
<rhx-sparkline rhx-values="new[] { 23, 45, 67, 34, 56, 78, 45, 89 }"
               rhx-min="0"
               rhx-max="100"
               rhx-stroke-color="#ef4444"
               rhx-label="CPU percentage (0-100)" />

<!-- Negative values with area fill -->
<rhx-sparkline rhx-values="new[] { -10, -5, 0, 5, 10, 15, 10, 5, 0, -5 }"
               rhx-type="area"
               rhx-stroke-color="#f97316"
               rhx-fill-color="#f9731633"
               rhx-label="Values crossing zero" />

<p>
    CPU usage
    <rhx-sparkline rhx-values="@Model.CpuHistory"
                   rhx-width="80px" rhx-height="1rem"
                   rhx-stroke-color="#10b981"
                   rhx-label="CPU sparkline" />
    72%
</p>
<p>
    Revenue
    <rhx-sparkline rhx-values="@Model.Sales"
                   rhx-type="area"
                   rhx-width="80px" rhx-height="1rem"
                   rhx-stroke-color="#6366f1"
                   rhx-fill-color="#6366f133"
                   rhx-label="Revenue sparkline" />
    $280k
</p>
<p>
    Scores
    <rhx-sparkline rhx-values="@Model.Scores"
                   rhx-type="bar"
                   rhx-width="80px" rhx-height="1rem"
                   rhx-fill-color="#f59e0b"
                   rhx-label="Score sparkline" />
    avg 7.5
</p>