devexpress/agent-skills/devexpress-blazor-gauges

Name: devexpress-blazor-gauges
Author: devexpress

Claude Code and agent skill by devexpress/agent-skills

Trust tier 2

community

LLM review pending

By devexpress
Coding
devexpress/agent-skills
Plugin dx-blazor
plugins/dx-blazor/skills/devexpress-blazor-gauges/SKILL.md
Updated 1 Nov 2026
Version 1.0.12 versions recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

Generate and configure DevExpress Blazor visualization components such as DxBarGauge, DxRangeSelector, DxSankey, DxSparkline, and DxMap. Use when building dashboards with gauges and range selection, Sankey flow diagrams, sparklines/mini charts, and interactive maps (data binding, labels, palettes, selection/hover/click events). Also use for bar gauge, range selector, Sankey, sparkline, map, and visualization feature comparisons or migration scenarios.

Install

npx vskill@latest install devexpress/agent-skills/devexpress-blazor-gauges

SKILL.md

DevExpress Blazor Visualization Components

A collection of specialized visualization components for Blazor:

`DxBarGauge` — Circular bar gauge displaying multiple values as arcs
`DxRangeSelector` — Linear scale with draggable sliders for range selection; optionally displays a background chart
`DxSankey` — Flow diagram showing value transfer between two entity sets
`DxSparkline` — Compact trend line/bar embedded in other UI (e.g., inside a Grid column)
`DxMap` — Geo map with markers and route display using Azure, Google, or GoogleStatic tiles

When to Use This Skill

Display multiple gauge values as concentric arc bars (DxBarGauge)
Let users visually select a date/numeric range by dragging sliders (DxRangeSelector)
Visualize flow between categories or entities (DxSankey)
Embed a compact trend chart inside a Grid cell or card (DxSparkline)
Show geo locations, routes, or markers on a map (DxMap)
Export gauge/sparkline/sankey as PNG/PDF/JPEG/GIF

Prerequisites & Installation

NuGet Package

Package	Purpose
`DevExpress.Blazor`	All components in this skill

bash

# Install from NuGet.org:
dotnet add package DevExpress.Blazor

csharp

builder.Services.AddDevExpressBlazor();

v26.1 note: DevExpress.Blazor no longer includes options.BootstrapVersion or DevExpress.Blazor.BootstrapVersion. Do not generate either API.

Add to _Imports.razor:

razor

@using DevExpress.Blazor

Apply a theme and add client scripts in App.razor inside <head>:

razor

@using DevExpress.Blazor
@DxResourceManager.RegisterTheme(Themes.Fluent)
@DxResourceManager.RegisterScripts()

`DxMap` requires a GIS API key (Azure Maps, Google Maps, or GoogleStatic). Pass it via the DxMapApiKeys child component and set Provider.

Before You Start — Ask the Developer

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

Before generating code, ask:

Render mode: InteractiveServer, InteractiveWebAssembly, InteractiveAuto, or Static/SSR? (Range Selector dragging and Map/Sankey click events require interactivity)
Which component?: Bar Gauge, Range Selector, Sankey, Sparkline, or Map?
Data source: Collection type and field names (for Sankey: source, target, weight fields; for Sparkline: argument, value fields)
For Bar Gauge: How many values? What is the scale range (StartValue/EndValue)?
For Range Selector: Numeric or DateTime scale? Does the user need a background chart?

Does the selected range need to filter or drive other components? (If yes → use ValueChanged event with RangeSelectorValueChangedEventArgs; never use @bind-SelectedRangeStartValue.)

For Map: Which GIS provider? Do you have an API key?

Component Overview

DxBarGauge — Quick Pattern

razor

@rendermode InteractiveServer
 
<DxBarGauge Width="100%"
            Height="400px"
            StartValue="0"
            EndValue="100"
            Values="@Values">
    <DxBarGaugeLabelSettings Indent="30" />
    <DxBarGaugeLegendSettings Visible="true"
                              ItemCaptions="@Captions"
                              VerticalAlignment="VerticalEdge.Bottom"
                              HorizontalAlignment="HorizontalAlignment.Center" />
</DxBarGauge>
 
@code {
    double[] Values = new double[] { 47.27, 65.32, 84.59 };
    string[] Captions = new string[] { "Metacritic", "Rotten Tomatoes", "IMDb" };
}

DxSankey — Quick Pattern

razor

<DxSankey Data="@Data"
          Width="100%"
          Height="440px"
          SourceFieldName="Source"
          TargetFieldName="Target"
          WeightFieldName="Weight">
    <DxSankeyNodeSettings Width="8" Spacing="30" />
    <DxSankeyLinkSettings ColorMode="SankeyLinkColorMode.Gradient" />
    <DxTitleSettings Text="Commodity Turnover" />
</DxSankey>

DxSparkline — Quick Pattern

razor

<DxSparkline Data="@DataSource"
             Type="SparklineType.Bar"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             Height="50px"
             Width="200px" />

DxRangeSelector — Quick Pattern

razor

<DxRangeSelector Data="@Data">
    <DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
                          EndValue="@(new DateTime(2024, 12, 31))"
                          TickInterval="ChartAxisInterval.Month"
                          ValueType="ChartAxisDataType.DateTime" />
    <DxRangeSelectorChart>
        <DxChartBarSeries ArgumentField="@((DataPoint s) => s.Date)"
                          ValueField="@((DataPoint s) => s.Value)" />
    </DxRangeSelectorChart>
</DxRangeSelector>

DxMap — Quick Pattern

razor

@rendermode InteractiveServer
 
<DxMap Provider="MapProvider.Azure"
       Zoom="12"
       Width="950px"
       Height="500px">
    <DxMapApiKeys Azure="YOUR-AZURE-MAPS-KEY" />
    <DxMapMarkers>
        <DxMapMarker>
            <DxMapMarkerLocation Latitude="51.5074" Longitude="-0.1278" />
            <DxMapMarkerTooltip Text="London" />
        </DxMapMarker>
    </DxMapMarkers>
</DxMap>

Note: DxMap requires a GIS provider API key. Use MapProvider.GoogleStatic for a quick static-image test without interactive tile setup.

Documentation & Navigation Guide

Bar Gauge

📄 references/bar-gauge.md

When you need to: configure gauge geometry (start/end values, base value), labels, legend, tooltips, palette, or export.

Range Selector

📄 references/range-selector.md

When you need to: configure scale (type, tick intervals, min/max range), set a predefined selected range, display a background chart, or handle selection change events.

Sankey

📄 references/sankey.md

When you need to: bind Sankey to data (source/target/weight fields), configure nodes/links/labels, handle click/hover events, or customize appearance.

Sparkline

📄 references/sparkline.md

When you need to: embed a sparkline in a Grid column, choose series type, configure min/max highlighting, win/loss display, or export.

Map

📄 references/map.md

When you need to: display markers or routes on a geo map, set the GIS provider (Azure, Google, or GoogleStatic), configure the API key, handle marker click events, or customize map zoom and center.

Getting Started (All Components)

📄 references/getting-started.md

When you need to: install and configure the NuGet package, add CSS/imports, or set up the first component.

Key Properties & API Surface

DxBarGauge

Property	Type	Description
`Values`	`double[]`	Array of values to display as gauge arcs
`StartValue`	`double`	Minimum scale value
`EndValue`	`double`	Maximum scale value
`BaseValue`	`double`	Base value for bars (bars grow from this value)
`Width` / `Height`	`string`	Component dimensions
`Palette`	`string[]`	Colors for each bar
`ExportAsync()`	`Task<string>`	Export as base64 image

DxSankey

Property	Type	Description
`Data`	`IEnumerable<T>`	Data source
`SourceFieldName`	`string`	Field name for the flow source node
`TargetFieldName`	`string`	Field name for the flow target node
`WeightFieldName`	`string`	Field name for the flow weight/volume
`Width` / `Height`	`string`	Component dimensions

DxSparkline

Property	Type	Description
`Data`	`IEnumerable<T>`	Data source
`ArgumentFieldName`	`string`	Field name for argument values
`ValueFieldName`	`string`	Field name for data values
`Type`	`SparklineType`	Series type: `Line`, `Bar`, `Spline`, `SplineArea`, `Area`, `StepLine`, `StepArea`, `WinLoss`
`Width` / `Height`	`string`	Component dimensions

DxRangeSelector

Property	Type	Description
`Data`	`IEnumerable<T>`	Optional data source for background chart
`SelectedRangeStartValue`	`object`	Initial start of the selected range
`SelectedRangeEndValue`	`object`	Initial end of the selected range
`SelectedRangeLength`	`ChartAxisInterval`	Length of initial selected range
`ValueChanged`	`EventCallback<RangeSelectorValueChangedEventArgs>`	Fires when the selected range changes. `args.CurrentRange` is a `List<object>` with two items — use `.Count` (not `.Length`) to check availability. For DateTime ranges cast defensively: `args.CurrentRange.FirstOrDefault() as DateTime? ?? fallback`. For numeric ranges use `Convert.ToInt32(args.CurrentRange.FirstOrDefault() ?? fallback)`.
`ValueChangeMode`	`RangeSelectorValueChangeMode`	When to raise `ValueChanged`: `OnHandleMove` (live) or `OnHandleRelease` (on drop). Default: `OnHandleRelease`.

DxMap

Property	Type	Description
`Provider`	`MapProvider`	GIS provider: `Azure`, `Google`, `GoogleStatic`
`Zoom`	`int`	Map zoom level
`DxMapApiKeys`	child component	Supplies the API key; set `Azure`, `Google`, or `GoogleStatic` attribute to the appropriate key
`Markers`	collection	Markers to display on the map
`Routes`	collection	Routes to display on the map

Common Patterns

Pattern 1: Bar Gauge with Labels and Legend

razor

<DxBarGauge Width="100%"
            Height="500px"
            StartValue="0"
            EndValue="100"
            Values="@Values">
    <DxBarGaugeLabelSettings Indent="30"
                             ConnectorColor="purple"
                             ConnectorWidth="4">
        <DxFontSettings Weight="600" />
        <DxTextFormatSettings LdmlString="@LabelFormat" />
    </DxBarGaugeLabelSettings>
    <DxBarGaugeLegendSettings Visible="true"
                              ItemCaptions="@LegendItemCaptions"
                              VerticalAlignment="VerticalEdge.Bottom"
                              HorizontalAlignment="HorizontalAlignment.Center" />
</DxBarGauge>
 
@code {
    double[] Values = new double[] { 47.27, 65.32, 84.59, 81.86, 99 };
    string[] LegendItemCaptions = new string[] { "Metacritic", "Ratingraph.com", "Rotten Tomatoes", "IMDb", "TV.com" };
    string LabelFormat = "##.#'%' ";
}

Pattern 2: Sankey with Gradient Links

razor

<DxSankey Data="@Data"
          Width="100%"
          Height="440px"
          SourceFieldName="Source"
          TargetFieldName="Target"
          WeightFieldName="Weight">
    <DxSankeyNodeSettings Width="8" Spacing="30" />
    <DxSankeyLinkSettings ColorMode="SankeyLinkColorMode.Gradient" />
    <DxTitleSettings Text="Commodity Turnover" />
</DxSankey>
 
@code {
    IEnumerable<SankeyDataPoint> Data = Enumerable.Empty<SankeyDataPoint>();
    protected override void OnInitialized() {
        Data = new List<SankeyDataPoint> {
            new SankeyDataPoint("Spain", "United States of America", 2),
            new SankeyDataPoint("Germany", "United States of America", 8),
            new SankeyDataPoint("France", "Great Britain", 4),
        };
    }
    record SankeyDataPoint(string Source, string Target, int Weight);
}

Pattern 3: Range Selector with DateTime Scale

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingplugins/dx-blazor/skills/devexpress-blazor-gauges/SKILL.md

Popularity

Repository stars: 67
Repository forks: 12
7-day trend score: 20

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/devexpress/agent-skills/devexpress-blazor-gauges/badge)](https://verified-skill.com/skills/devexpress/agent-skills/devexpress-blazor-gauges)

Something wrong with this skill or its page? Tell us.