Blazor - Use DevExtreme Circular Gauge in a Blazor Application

February 16, 2026 · View on GitHub

This example embeds DevExtreme widgets into your Blazor application.

Circular Gauge in DevExpress Blazor App

The DevExpress Blazor UI Component Library includes multiple DevExtreme-based components (for example, DxHtmlEditor or DxMap). Refer to class descriptions for more information.

Implementation Details

Register DevExtreme Scripts

DevExtreme widgets require DevExtreme scripts and stylesheets. The DevExpress Resource Manager automatically registers the DevExtreme script if your project includes the DevExpress.Blazor package.

To add DevExtreme stylesheets, reference corresponding files in the Components/App.razor file. For example:

<head>
    <link href=@AppendVersion("css/dx.fluent.blue.light.css") rel="stylesheet" />
    <!-- ... -->
</head>

@code {
    private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
    // ...
}

The Gauge component renders as an SVG image and does not require DevExtreme stylesheets.

Implement a Wrapper

DevExtremeGauge.razor and DevExtremeGauge.razor.js files wrap the DevExtreme Circular Gauge widget. During the wrapper's first render, the wrapper executes the LoadDxResources method to force the Resource Manager to load all client scripts:

protected override async Task OnAfterRenderAsync(bool firstRender) {
    if(firstRender) {
        await JS.LoadDxResources();
        ClientModule = await JS.InvokeAsync<IJSObjectReference>("import", "./DevExtremeComponents/DevExtremeGauge.razor.js");
        ClientGauge = await ClientModule.InvokeAsync<IJSObjectReference>("initializeGauge", Gauge, DataSource);
    }
    await base.OnAfterRenderAsync(firstRender);
}

Render the Blazor component

You can use the wrapper as a regular Blazor component. The following code adds a DevExtremeGauge wrapper component to a page:

<DevExtremeGauge />

Files to Review

Documentation

More Examples

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)