devexpress-blazor-charts

Name: devexpress-blazor-charts
Author: DevExpress

35stars6forks

How to install devexpress-blazor-charts?

devexpress/agent-skills/devexpress-blazor-charts

$npx -y skills add DevExpress/agent-skills --skill devexpress-blazor-charts

Installs into the current project.

Summary

--- name: devexpress-blazor-charts description: 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, zoo

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Charts
2
3	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`).
4
5	## When to Use This Skill
6
7	- Add a line, bar, area, scatter, bubble, or financial chart to a Blazor page
8	- Create a pie or donut chart with per-sector labels and colors
9	- Display data in polar coordinates (spider/wind rose charts)
10	- Bind a chart to a C# collection, async service, or observable collection
11	- Configure axes: titles, strips, constant lines, scale breaks, axis ranges
12	- Add series labels, tooltips, legend, annotations, titles/subtitles
13	- Apply a custom color palette to series or pie sectors
14	- Enable zoom/pan with mouse wheel, touch gestures, or drag-to-zoom
15	- Export chart content to PNG, PDF, JPEG, or GIF
16	- Handle user interaction: point/series click, selection, hover events
17
18	## Prerequisites & Installation
19
20	### NuGet Package
21
22	\| Package \| Purpose \|
23	\|---------\|---------\|
24	\| `DevExpress.Blazor` \| All chart components (`DxChart`, `DxPieChart`, `DxPolarChart`) \|
25
26	```bash
27	# Install from NuGet.org:
28	dotnet add package DevExpress.Blazor
29	```
30
31	Register in `Program.cs`:
32	```csharp
33	builder.Services.AddDevExpressBlazor();
34	```
35
36	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
37
38	Add to `_Imports.razor`:
39	```razor
40	@using DevExpress.Blazor
41	```
42
43	Apply a theme and add client scripts in `App.razor` inside `<head>`:
44	```razor
45	@using DevExpress.Blazor
46	@DxResourceManager.RegisterTheme(Themes.Fluent)
47	@DxResourceManager.RegisterScripts()
48	```
49
50	Important: All DevExpress packages must use the same version. A valid DevExpress license is required.
51
52	## Before You Start — Ask the Developer
53
54	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.
55
56	Before generating code, ask:
57
58	1. Render Mode: What is your render mode? (`InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`, or Static/SSR — note: zoom/pan and selection require interactivity)
59	2. Chart type: `DxChart` (Cartesian), `DxPieChart` (pie/donut), or `DxPolarChart` (polar/spider)?
60	3. Series type: Which series type? (Line, Bar, Area, Scatter, Bubble, Candlestick, Pie, etc.)
61	4. Data source: Is your data an `IEnumerable<T>` collection, async/injected service, or `ObservableCollection<T>`?
62	5. Features needed: Which features? (Labels, legend, tooltips, axes config, zoom/pan, selection, export, palette, annotations)
63
64	> Rule: If the chart type or series type is ambiguous, ask before generating — the component tags and properties differ significantly.
65
66	## Component Overview
67
68	- `DxChart<T>`: Cartesian chart with 20+ series types, multiple panes, multiple axes, zoom/pan
69	- `DxPieChart<T>`: Pie/donut chart; one series type (`DxPieChartSeries`), `InnerDiameter` for donut
70	- `DxPolarChart<T>`: Polar coordinate chart, supports spider web (`UseSpiderWeb="true"`)
71
72	### Core Pattern
73
74	```razor
75	@rendermode InteractiveServer
76
77	<DxChart Data="DataSource">
78	<DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
79	ValueField="@((DataPoint v) => v.Sales)"
80	Name="Sales" />
81	<DxChartTitle Text="Sales by Country" />
82	<DxChartLegend Visible="true" />
83	</DxChart>
84
85	@code {
86	IEnumerable<DataPoint> DataSource;
87	protected override void OnInitialized() => DataSource = GetData();
88	}
89	```
90
91	## Documentation & Navigation Guide
92
93	### Getting Started
94	📄 [references/getting-started.md](references/getting-started.md)
95
96	When you need to: set up charts for the first time, install NuGet, bind to a data sou

People who liked this also viewed

6 picks

Type

devexpress-blazor-charts

35stars6forks

View on GitHub

How to install devexpress-blazor-charts?

devexpress/agent-skills/devexpress-blazor-charts

$npx -y skills add DevExpress/agent-skills --skill devexpress-blazor-charts

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Charts
2
3	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`).
4
5	## When to Use This Skill
6
7	- Add a line, bar, area, scatter, bubble, or financial chart to a Blazor page
8	- Create a pie or donut chart with per-sector labels and colors
9	- Display data in polar coordinates (spider/wind rose charts)
10	- Bind a chart to a C# collection, async service, or observable collection
11	- Configure axes: titles, strips, constant lines, scale breaks, axis ranges
12	- Add series labels, tooltips, legend, annotations, titles/subtitles
13	- Apply a custom color palette to series or pie sectors
14	- Enable zoom/pan with mouse wheel, touch gestures, or drag-to-zoom
15	- Export chart content to PNG, PDF, JPEG, or GIF
16	- Handle user interaction: point/series click, selection, hover events
17
18	## Prerequisites & Installation
19
20	### NuGet Package
21
22	\| Package \| Purpose \|
23	\|---------\|---------\|
24	\| `DevExpress.Blazor` \| All chart components (`DxChart`, `DxPieChart`, `DxPolarChart`) \|
25
26	```bash
27	# Install from NuGet.org:
28	dotnet add package DevExpress.Blazor
29	```
30
31	Register in `Program.cs`:
32	```csharp
33	builder.Services.AddDevExpressBlazor();
34	```
35
36	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
37
38	Add to `_Imports.razor`:
39	```razor
40	@using DevExpress.Blazor
41	```
42
43	Apply a theme and add client scripts in `App.razor` inside `<head>`:
44	```razor
45	@using DevExpress.Blazor
46	@DxResourceManager.RegisterTheme(Themes.Fluent)
47	@DxResourceManager.RegisterScripts()
48	```
49
50	Important: All DevExpress packages must use the same version. A valid DevExpress license is required.
51
52	## Before You Start — Ask the Developer
53
54	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.
55
56	Before generating code, ask:
57
58	1. Render Mode: What is your render mode? (`InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`, or Static/SSR — note: zoom/pan and selection require interactivity)
59	2. Chart type: `DxChart` (Cartesian), `DxPieChart` (pie/donut), or `DxPolarChart` (polar/spider)?
60	3. Series type: Which series type? (Line, Bar, Area, Scatter, Bubble, Candlestick, Pie, etc.)
61	4. Data source: Is your data an `IEnumerable<T>` collection, async/injected service, or `ObservableCollection<T>`?
62	5. Features needed: Which features? (Labels, legend, tooltips, axes config, zoom/pan, selection, export, palette, annotations)
63
64	> Rule: If the chart type or series type is ambiguous, ask before generating — the component tags and properties differ significantly.
65
66	## Component Overview
67
68	- `DxChart<T>`: Cartesian chart with 20+ series types, multiple panes, multiple axes, zoom/pan
69	- `DxPieChart<T>`: Pie/donut chart; one series type (`DxPieChartSeries`), `InnerDiameter` for donut
70	- `DxPolarChart<T>`: Polar coordinate chart, supports spider web (`UseSpiderWeb="true"`)
71
72	### Core Pattern
73
74	```razor
75	@rendermode InteractiveServer
76
77	<DxChart Data="DataSource">
78	<DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
79	ValueField="@((DataPoint v) => v.Sales)"
80	Name="Sales" />
81	<DxChartTitle Text="Sales by Country" />
82	<DxChartLegend Visible="true" />
83	</DxChart>
84
85	@code {
86	IEnumerable<DataPoint> DataSource;
87	protected override void OnInitialized() => DataSource = GetData();
88	}
89	```
90
91	## Documentation & Navigation Guide
92
93	### Getting Started
94	📄 [references/getting-started.md](references/getting-started.md)
95
96	When you need to: set up charts for the first time, install NuGet, bind to a data sou

People who liked this also viewed

6 picks

Type