@page "/styling-gauge"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Radzen Blazor Gauge Styling
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Customize gauge appearance with colors, fonts, and scale properties.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo two gauges demonstrate advanced styling: a <strong>Clock</strong> using <code>RadzenRadialGauge</code> with three pointers (hours, minutes, seconds in red) updating every second via timer, and an <strong>Activity gauge</strong> using three nested <code>RadzenArcGauge</code> scales for Move (pink), Exercise (yellow-green), and Stand (cyan) with custom SVG template displaying percentages.
</RadzenText>

<RadzenExample ComponentName="ArcGauge" Example="StylingGaugeConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/arcgauge.html">
    <StylingGaugeConfig />
</RadzenExample>
