# Devexpress Blazor Charts

> Generate and configure DevExpress Blazor Charts (DxChart, DxPieChart, DxPolarChart) for common chart types (line/bar/area/pie/donut/scatter/bubble/financial), data binding, axes, series, labels, tooltips, legends, annotations, zoom/pan, palettes, selection, and export/print. Also use for Blazor charts, data visualization, dashboards, and chart feature comparisons or migration scenarios.

- **Type:** Skill
- **Install:** `agentstack add skill-devexpress-agent-skills-devexpress-blazor-charts`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [DevExpress](https://agentstack.voostack.com/s/devexpress)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [DevExpress](https://github.com/DevExpress)
- **Source:** https://github.com/DevExpress/agent-skills/tree/main/plugins/dx-blazor/skills/devexpress-blazor-charts
- **Website:** https://www.devexpress.com

## Install

```sh
agentstack add skill-devexpress-agent-skills-devexpress-blazor-charts
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

| Package | Purpose |
|---------|---------|
| `DevExpress.Blazor` | All chart components (`DxChart`, `DxPieChart`, `DxPolarChart`) |

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

Register in `Program.cs`:
```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 ``:
```razor
@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

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` collection, async/injected service, or `ObservableCollection`?
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`**: Cartesian chart with 20+ series types, multiple panes, multiple axes, zoom/pan
- **`DxPieChart`**: Pie/donut chart; one series type (`DxPieChartSeries`), `InnerDiameter` for donut
- **`DxPolarChart`**: Polar coordinate chart, supports spider web (`UseSpiderWeb="true"`)

### Core Pattern

```razor
@rendermode InteractiveServer


     v.Country)"
                       ValueField="@((DataPoint v) => v.Sales)"
                       Name="Sales" />
    
    


@code {
    IEnumerable DataSource;
    protected override void OnInitialized() => DataSource = GetData();
}
```

## Documentation & Navigation Guide

### Getting Started
📄 [references/getting-started.md](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](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](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](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](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](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

```razor
@rendermode InteractiveServer
@using DevExpress.Blazor


     v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        
    
     v.Country)"
                      ValueField="@((DataPoint v) => v.GrapeProduction)"
                      Name="Grapes">
        
    
    
    


@code {
    IEnumerable DataSource;

    protected override void OnInitialized() {
        DataSource = new List {
            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](examples/quickstart.razor) for the complete file.

## Key Properties & API Surface

### DxChart / DxPieChart / DxPolarChart (shared)

| Property / Method | Type | Description |
|---|---|---|
| `Data` | `IEnumerable` | The chart's data source |
| `Palette` | `string[]` | Custom color palette for series/sectors |
| `PaletteExtensionMode` | `ChartPaletteExtensionMode` | How palette is extended when colors run out (`Alternate`, `Blend`, `Extrapolate`) |
| `LabelOverlap` | `ChartLabelOverlap` / `PieChartLabelOverlap` | How overlapping labels are handled (`Hide`, `Stack`, etc.) |
| `PointSelectionMode` | `ChartSelectionMode` | Point selection mode (`None`, `Single`, `Multiple`) |
| `SeriesSelectionMode` | `ChartSelectionMode` | Series selection mode |
| `ExportAsync(ChartExportFormat format)` | `Task` | Export chart to base64-encoded string in the specified format |

### DxChart-specific

| Property | Type | Description |
|---|---|---|
| `Rotated` | `bool` | Swap argument/value axes |
| `VisualRangeChanged` | event | Fires when zoom/pan changes axis range |
| `ResetVisualRange()` | — | Reset zoom to default |
| `SetArgumentAxisVisualRange()` | — | Set visible range programmatically |

### Series (DxChartLineSeries, DxChartBarSeries, etc.)

| Property | Type | Description |
|---|---|---|
| `ArgumentField` | lambda | Maps data item to argument axis value |
| `ValueField` | lambda | Maps data item to value axis value |
| `Name` | `string` | Series name (shown in legend) |
| `Data` | `IEnumerable` | Per-series data source override |
| `Filter` | lambda | Filter data items for this series |
| `Color` | `Color` | Override series color |
| `Stack` | `string` | Groups stacked bar series by name |

### DxPieChart-specific

| Property | Type | Description |
|---|---|---|
| `InnerDiameter` | `double` | `> 0` creates a donut chart |

## Common Patterns

### Pattern 1: Pie / Donut Chart

```razor
@rendermode InteractiveServer


     v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        
    
    
    

```

### Pattern 2: Zoom and Pan

```razor

     v.Date)"
                       ValueField="@((DataPoint v) => v.Value)" />
    
    

```

### Pattern 3: Point Selection with Event Handler

```razor

     v.Country)"
                      ValueField="@((DataPoint v) => v.Sales)" />

```

## Troubleshooting

| Symptom | Cause | Solution |
|---------|-------|---------|
| Chart displays as static image, no interaction | Missing or wrong render mode | Add `@rendermode InteractiveServer` (or WASM/Auto) to the page/component |
| Labels overlap or disappear | Many data points close together | Set `LabelOverlap="ChartLabelOverlap.Hide"` on `DxChart` |
| "The component parameter 'Data' cannot be null" at runtime | Data not initialized before render | Populate `DataSource` in `OnInitialized()`, not in `OnAfterRender()` |
| Pie/Polar chart shows wrong colors | Palette exhausted | Set `PaletteExtensionMode` to `Alternate` or `Blend` |
| `ExportAsync()` returns empty/null | Called before chart renders | Call from `OnAfterRenderAsync(firstRender: true)` |
| Generic type inference error | Missing type params on series | Use lambda syntax: `ArgumentField="@((MyType v) => v.Prop)"` |
| Multiple series show overlapped bars | Stack grouping missing | Set `Stack` property on `DxChartStackedBarSeries` to separate groups |
| `"Unhandled exception on the current circuit"` with no detail | `CircuitOptions.DetailedErrors` not set | Add `builder.Services.Configure(o => o.DetailedErrors = true);` in `Program.cs` (development only) |
| `"Component parameter 'ValueChanged' is used two or more times"` compile error | `@bind-Value` and `ValueChanged` used together | Use `@bind-Value="@val"` for two-way binding, or `Value="@val" ValueChanged="@handler"` — never both simultaneously |
| `dx-blazor.js` not found (404) behind a reverse proxy | Reverse proxy strips the app base path | Add `app.UsePathBase("/subpath")` before `app.MapBlazorHub()`, or set `` in `App.razor` |
| Static assets return 404 (`dx-blazor.css`, `dx-blazor.js`) | `UseStaticWebAssets()` not called | Add `app.UseStaticWebAssets();` in `Program.cs` before `app.UseStaticFiles()` |
| `"Could not find 'X' in 'window.DxBlazor'"` JavaScript error | Stale browser-cached JS from an older DevExpress version | Hard-refresh the browser (Ctrl+Shift+R), clear site data, or verify all DevExpress NuGet packages are the same version |
| `"Cannot pass the parameter 'X' to component 'Y' with rendermode"` | Non-serializable parameter passed across a render mode boundary | Move the component to a child `.razor` file with its own `@rendermode` directive; pass only serializable parameters |

## Constraints & Rules

CRITICAL — follow these rules in every interaction:

0. **Never invent API**: If a property, method, event, or feature is not documented in this skill or its references, do **not** assume it exists. When asked about an unfamiliar API, first try to verify it using the DevExpress documentation MCP (`devexpress_docs_search`) or the local `apidoc/` folder. Only after checking: if confirmed, use the API; if not found, explicitly state that it does not appear to be part of the DevExpress Blazor Charts API. Do not warn that a feature "may have been introduced in a recent version" as a way to justify inventing it.
1. **Build verification**: Run `dotnet build` after changes. Check for errors before reporting success.
2. **NuGet packages**: Use exact package names from Prerequisites. Never guess.
3. **Namespace imports**: Always include `@using DevExpress.Blazor` in your Razor files.
4. **Version consistency**: All DevExpress packages in the project must use the same version.
5. **License**: DevExpress requires a valid license. Remind the developer if they encounter license-related build errors.
6. **No destructive changes**: Preserve existing code structure. Only add/modify what is necessary.
7. **Interactivity**: `DxChart` supports static render mode for display only. For zoom/pan, selection, and tooltips, the component must be in an interactive render mode.
8. **Generic components**: `DxChart`, `DxPieChart`, and `DxPolarChart` are generic (`DxChart`). The type is inferred from the `Data` property or series lambda expressions. If inference fails, specify `T="MyType"` on the component tag.
9. **DxChartSeriesLabel**: Use `ValueFormat` (a `ChartElementFormat` value) for label formatting — **not** the obsolete `Format` property (lambda). Example: `` with no format, or configure via `` on the axis.

## Using DevExpress Documentation MCP

If the DxDocs MCP server is available, use it to supplement this skill:

- **Search**: `devexpress_docs_search(technology="Blazor", query="")`
- **Fetch**: `devexpress_docs_get_content(url="")`

Use MCP for: exact method signatures, event argument types, uncommon series properties, version-specific changes, or features not covered in the references above.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [DevExpress](https://github.com/DevExpress)
- **Source:** [DevExpress/agent-skills](https://github.com/DevExpress/agent-skills)
- **License:** MIT
- **Homepage:** https://www.devexpress.com

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-devexpress-agent-skills-devexpress-blazor-charts
- Seller: https://agentstack.voostack.com/s/devexpress
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.