syncfusion-aspnetcore-lineargauge

Name: syncfusion-aspnetcore-lineargauge
Author: syncfusion

github.com/syncfusionDesign & UI053 installsUpdated 2w ago

About syncfusion-aspnetcore-lineargauge

An implementation guide for Syncfusion Linear Gauge, aimed at developers building numerical gauges in ASP.NET Core projects. It covers pointers, ranges, annotations, and interactions for displays such as temperature, progress, and monitoring metrics.

Key features

01Marker and Bar pointers
02Colored value ranges
03Text, image, and HTML annotations
04Dragging, tooltips, and events
05Pointer animation and visual customization
06Print and image export

Use cases

01Display temperature or speed
02Build a progress indicator
03Compare actual and target dashboard values
04Monitor changing values in real time

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-lineargauge

After installing, type/syncfusion-aspnetcore-lineargaugein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

advanced-features.md

annotations.md

api-reference.md

appearance-and-styling.md

examples-and-use-cases.md

gauge-dimensions.md

getting-started.md

interactions-and-events.md

pointers-and-indicators.md

ranges-and-values.md

Details

From the project README

Implementing Syncfusion Linear Gauge

When to Use This Skill

Use this skill when you need to:

Display numerical values in a linear gauge format (temperature, speed, performance metrics)
Create interactive gauges with draggable pointers
Visualize ranges and thresholds on a linear scale
Add annotations and custom elements to gauges
Implement dashboard gauges with real-time data updates
Build thermometer-style or progress indicator components

Component Overview

The Linear Gauge component visualizes numerical values of an axis in a linear manner. All elements are rendered using Scalable Vector Graphics (SVG). Key features include:

Multiple pointers - Support for Marker and Bar pointer types
Range highlighting - Define color ranges to highlight value zones
Annotations - Add text, images, or HTML elements anywhere on the gauge
Interactive features - Drag-and-drop pointers, tooltips, and events
Animations - Smooth pointer animations on load and value changes
Customization - Colors, themes, borders, scales, and container types (Normal, RoundedRectangle, Thermometer)
Accessibility - WCAG 2.2 compliance with screen reader support
Print & Export - Print and export gauge images

Quick Start Example

Here's a minimal Linear Gauge implementation:

<!-- ASP.NET Core Tag Helper -->
<ejs-lineargauge id="linear" title="Temperature Gauge" orientation="Horizontal">
    <e-lineargauge-axes>
        <e-lineargauge-axis minimum="0" maximum="200">
            <e-lineargauge-ranges>
                <e-lineargauge-range start="0" end="50" color="blue"></e-lineargauge-range>
                <e-lineargauge-range start="50" end="150" color="green"></e-lineargauge-range>
                <e-lineargauge-range start="150" end="200" color="red"></e-lineargauge-range>
            </e-lineargauge-ranges>
            <e-lineargauge-pointers>
                <e-lineargauge-pointer value="75" type="Bar"></e-lineargauge-pointer>
            </e-lineargauge-pointers>
        </e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>