Blazor Linear Gauge Example - Container Customization

This sample presents the Linear Gauge as a measuring scale and demonstrates tooltip interaction alongside container and orientation customization. It renders a continuous scale with selectable container types (normal, thermometer, rounded rectangle) and supports toggling the gauge orientation between vertical and horizontal for different layout requirements.

Tooltips provide precise, contextual readouts by displaying the value nearest the pointer or touch contact. As the pointer moves, tooltips update dynamically and snap to the closest tick, pointer, or indicator so users receive immediate feedback tied to a measurable position on the scale.

On touch-enabled devices the tooltip behavior remains consistent: tooltips appear on hover or tap, ensuring parity between pointer and touch interactions. The sample highlights default placement and snapping behavior while preserving readability on smaller screens.

Controls in the sample include an Orientation dropdown to render the gauge vertically or horizontally and a Container Type dropdown to select the visual container style. These controls demonstrate how appearance and layout options affect both presentation and interaction.

Tooltips and containers are configurable: you can alter formatting, units, precision, placement, and container styling via the component API and event hooks to match application requirements. Consider accessibility, contrast, and font size when customizing tooltip content to ensure legibility for all users.

See the documentation for details on tooltip interaction and container options: tooltip documentation, container customization, and axis orientation.