devexpress/agent-skills/devexpress-blazor-charts

DevExpress Blazor Charts

DevExpress Blazor Charts (DxChart, DxPieChart, DxPolarChart) transform data into concise visual representations with 20+ series types, customizable axes, descriptive elements, zoom/pan, and export. All three chart components share a common set of descriptive element components (DxChartTitle, DxChartLegend, DxChartSeriesLabel).

When to Use This Skill

• Add a line, bar, area, scatter, bubble, or financial chart to a Blazor page
• Create a pie or donut chart with per-sector labels and colors
• Display data in polar coordinates (spider/wind rose charts)
• Bind a chart to a C# collection, async service, or observable collection
• Configure axes: titles, strips, constant lines, scale breaks, axis ranges
• Add series labels, tooltips, legend, annotations, titles/subtitles
• Apply a custom color palette to series or pie sectors
• Enable zoom/pan with mouse wheel, touch gestures, or drag-to-zoom
• Export chart content to PNG, PDF, JPEG, or GIF
• Handle user interaction: point/series click, selection, hover events

Prerequisites & Installation

NuGet Package

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

Register in Program.cs:

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:

@using DevExpress.Blazor

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

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

Important: All DevExpress packages must use the same version. A valid DevExpress license is required.

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:

1. Render Mode: What is your render mode? (InteractiveServer, InteractiveWebAssembly, InteractiveAuto, or Static/SSR — note: zoom/pan and selection require interactivity)
2. Chart type: DxChart (Cartesian), DxPieChart (pie/donut), or DxPolarChart (polar/spider)?
3. Series type: Which series type? (Line, Bar, Area, Scatter, Bubble, Candlestick, Pie, etc.)
4. Data source: Is your data an IEnumerable<T> collection, async/injected service, or ObservableCollection<T>?
5. Features needed: Which features? (Labels, legend, tooltips, axes config, zoom/pan, selection, export, palette, annotations)

Rule: If the chart type or series type is ambiguous, ask before generating — the component tags and properties differ significantly.

Component Overview

• `DxChart<T>`: Cartesian chart with 20+ series types, multiple panes, multiple axes, zoom/pan
• `DxPieChart<T>`: Pie/donut chart; one series type (DxPieChartSeries), InnerDiameter for donut
• `DxPolarChart<T>`: Polar coordinate chart, supports spider web (UseSpiderWeb="true")

Core Pattern

@rendermode InteractiveServer
 
<DxChart Data="DataSource">
    <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                       ValueField="@((DataPoint v) => v.Sales)"
                       Name="Sales" />
    <DxChartTitle Text="Sales by Country" />
    <DxChartLegend Visible="true" />
</DxChart>
 
@code {
    IEnumerable<DataPoint> DataSource;
    protected override void OnInitialized() => DataSource = GetData();
}

Documentation & Navigation Guide

Getting Started

📄 references/getting-started.md

When you need to: set up charts for the first time, install NuGet, bind to a data source, and see a complete first-chart example.

Series Types

📄 references/series-types.md

When you need to: choose a series type, understand the series tag names, configure financial/bubble/range series, combine multiple series on one plane, or switch the chart type at runtime (bar/line/area toggle button). Also load this reference when you see error RZ10001 about DxChartCommonSeries.

Data Binding

📄 references/data-binding.md

When you need to: bind synchronously or asynchronously, use ObservableCollection, bind DataTable, trigger chart updates, or use per-series data sources.

Axes & Labels

📄 references/axes-labels.md

When you need to: configure argument/value axes, add axis titles, strips, constant lines, scale ranges, rotate axes, or configure series/axis labels.

Descriptive Elements & Customization

📄 references/customization.md

When you need to: add legend, titles, subtitles, tooltips, annotations, apply a custom palette, customize fonts, or style inner components.

User Interaction & Zoom

📄 references/interaction.md

When you need to: enable zoom/pan, drag-to-zoom, scroll bar, handle click/selection/hover events, or select series/points in code.

Quick Start Example

@rendermode InteractiveServer
@using DevExpress.Blazor
 
<DxChart Data="DataSource">
    <DxChartBarSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxChartBarSeries>
    <DxChartBarSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.GrapeProduction)"
                      Name="Grapes">
        <DxChartSeriesLabel Visible="true" />
    </DxChartBarSeries>
    <DxChartTitle Text="Fruit Production by Country" />
    <DxChartLegend Position="RelativePosition.Outside"
                   HorizontalAlignment="HorizontalAlignment.Right" />
</DxChart>
 
@code {
    IEnumerable<DataPoint> DataSource;
 
    protected override void OnInitialized() {
        DataSource = new List<DataPoint> {
            new DataPoint("USA", 4.21, 6.22),
            new DataPoint("China", 3.33, 8.65),
            new DataPoint("Turkey", 2.6, 4.25),
        };
    }
 
    record DataPoint(string Country, double AppleProduction, double GrapeProduction);
}

See examples/quickstart.razor for the complete file.

Key Properties & API Surface

DxChart / DxPieChart / DxPolarChart (shared)

DxChart-specific

Series (DxChartLineSeries, DxChartBarSeries, etc.)

DxPieChart-specific

Common Patterns

Pattern 1: Pie / Donut Chart

@rendermode InteractiveServer
 
<DxPieChart Data="DataSource"
            InnerDiameter="0.4"
            LabelOverlap="PieChartLabelOverlap.Hide">
    <DxPieChartSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPieChartSeries>
    <DxChartTitle Text="Apple Production" />
    <DxChartLegend Visible="true" />
</DxPieChart>

Pattern 2: Zoom and Pan

<DxChart Data="DataSource">
    <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Date)"
                       ValueField="@((DataPoint v) => v.Value)" />
    <DxChartZoomAndPanSettings ArgumentAxisZoomAndPanMode="ChartAxisZoomAndPanMode.Both"
                               AllowMouseWheel="true"
                               AllowDragToZoom="true" />
    <DxChartScrollBarSettings ArgumentAxisScrollBarVisible="true"
                              ArgumentAxisScrollBarPosition="ChartScrollBarPosition.Bottom" />
</DxChart>

Pattern 3: Point Selection with Event Handler

<DxChart Data="DataSource"
         PointSelectionMode="ChartSelectionMode.Single">
    <DxChartBarSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.Sales)" />
</DxChart>

Troubleshooting