wpf-devexpress-charts

Build WPF applications with the DevExpress ChartControl for 2D data visualization.

Updated Dec 11, 2025
One-click install
npx skills add https://github.com/AleksaRistic216/dotnet-playground --skill wpf-devexpress-charts-aleksaristic216
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wpf-devexpress-charts
Source: https://github.com/AleksaRistic216/dotnet-playground/tree/main/.github/skills/wpf/wpf-devexpress-charts
Command: npx skills add https://github.com/AleksaRistic216/dotnet-playground --skill wpf-devexpress-charts-aleksaristic216

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires DevExpress.Wpf.Charts, DevExpress.Wpf.Printing, and includes references (resource) components.

What problem does it solve? Adding charts to a WPF application with the DevExpress ChartControl involves many interacting pieces — diagrams, series types, axes, scale options, data binding, legends, tooltips, and selection — and misconfiguring any of them (e.g., pairing a pie series with a Cartesian diagram) causes runtime errors or empty charts. This Skill provides structured guidance and working XAML/C# patterns to configure the control correctly the first time. ## Core Features & Use Cases - Chart construction and data binding: Add ChartControl to a WPF window, bind series to IEnumerable, ObservableCollection, or DataTable via ArgumentDataMember/ValueDataMember, and generate series from ViewModels with Diagram.SeriesItemsSource. - Axes, scales, and aggregation: Configure primary and secondary axes, choose Numerical/DateTime/TimeSpan/Qualitative scale types, and aggregate large datasets with Average, Sum, Financial, or custom functions. - Interactivity and presentation: Add legends with check boxes, format labels with text patterns, enable tooltips and the crosshair cursor, and implement Single/Multiple/Extended selection bound to a ViewModel. - Use Case: A developer needs a dashboard showing monthly revenue bars plus a conversion-rate line on a secondary y-axis, with a crosshair and clickable bars that drill into details — the Skill supplies the exact XAML, ViewModel bindings, and troubleshooting table for this setup. ## Quick Start Ask the AI to create a WPF bar chart using DevExpress ChartControl bound to an ObservableCollection of sales data with a legend and tooltips.

Frequently Asked Questions about wpf-devexpress-charts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a DevExpress chart to a WPF application?

Install the DevExpress.Wpf.Charts NuGet package, target net8.0-windows with UseWPF enabled, and declare the dxc XAML namespace. Then place a ChartControl with a diagram (such as XYDiagram2D) and a series bound via ArgumentDataMember and ValueDataMember.

How do I bind a DevExpress WPF chart to a collection?

Set ChartControl.DataSource to an IEnumerable or ObservableCollection, then set each series's ArgumentDataMember and ValueDataMember to the data class property names. Property names are case-sensitive, and ObservableCollection is required for live updates.

Which diagram should I use for a pie chart in DevExpress WPF?

Pie, donut, and funnel series require SimpleDiagram2D, not XYDiagram2D. Mixing a PieSeries2D into a Cartesian diagram throws a runtime exception, so always match the series class to its compatible diagram type.

Does DevExpress WPF Charts support .NET 8?

Yes, the ChartControl supports .NET 6, 7, 8+ and .NET Framework 4.6.2+, targeting Windows only with the net8.0-windows target framework and UseWPF enabled. A valid DevExpress license is required.

Why does my DevExpress chart show axes but no data?

The series has no points because ArgumentDataMember or ValueDataMember does not match the data source property names exactly — matching is case-sensitive. Verify the field names against your data class properties.

How do I plot two series with different value ranges on one chart?

Add a SecondaryAxisY2D to the diagram's SecondaryAxesY collection and bind one series to it with AxisY set to that axis via ElementName binding. Set Alignment to Far so the secondary axis renders on the right side.