Dashboard & Data Visualization Blog

DevExtreme JavaScript Chat Meets DevExpress BI Dashboard — AI-powered Data Analysis

Dmitry Tokmachev (DevExpress) — Mon, 09 Jun 2025 02:25:00 Z

In this post, I'll describe how you can leverage the capabilities of the DevExpress JavaScript Chat (dxChat) component and incorporate an AI Assistant within the DevExpress BI Dashboard. As you'll see below, thedxChat component is connected to Open AI hosted in Microsoft Azure and uses the Assistants API for data analysis purposes (users can analyze dashboard data conversationally).

How It Works

When the DevExpress BI Dashboard loads (or whenever data changes), it automatically exports aggregated data to a temporary data snapshot. Behind the scenes, the AI Assistant processes Dashboard exports (triggered by each data update), sends updated files to the OpenAI Assistant, and generates real-time responses to user queries based on Dashboard data. The implementation follows the "bring your own key" principle, requiring an active OpenAI or Azure OpenAI subscription to access the AI service.

Implementation Details:

Custom Dashboard Item: The AI assistant is implemented as a custom web Dashboard item using the dxChat widget. You can add it from the toolbox, like any other Dashboard item.
Context-Aware Responses: The AI Assistant reviews/analyzes displayed data. Changes to Dashboard parameters, filters, or data sources automatically refresh the Assistant context.
Dynamic Data Interaction: Click “Select Widget” in the chat header to narrow the Assistant’s focus to a single Dashboard element.

Review our GitHub Example

To review our implementation and try it at your own pace, visit our GitHub repository, where you’ll find:

Source code and setup instructions
Custom Dashboard item implementation
Azure OpenAI integration

GitHub Repository — DevExpress BI Dashboard for ASP.NET Core — Azure OpenAI-based AI Assistant

Note: To see more examples of AI Assistant integration, refer to the following resources:

Share Your Feedback

We appreciate your continued support and enthusiasm for DevExpress tools. If you have any questions or would like to discuss AI-related integration needs, please submit a support ticket via the DevExpress Support Center.

DevExpress BI Dashboard — New Export Capabilities (v23.1)

Polina Fedorova (DevExpress) — Wed, 16 Aug 2023 23:30:00 Z

In our v23.1 release cycle, we extended export capabilities for BI Dashboard items. These enhancements are available for WinForms, WPF and Web platforms and include the following options:

Export Custom Dashboard items to Excel and customize the exported document itself
Customize Pivot Grid Dashboard items during export

Custom Item Export to Excel

v23.1 allows you to export Custom Dashboard items using all supported export formats for built-in Dashboard items. This includes:

PDF
Image
Excel (XLS, XLSX)

An Export to Excel option has been added to the Export To drop-down (located within a Custom Dashboard item’s caption).

For Web platforms, you can display the Export To option for an individual Custom Dashboard item within your BI Dashboard by overriding the allowExportSingleItem method in the item’s configuration file:

class FunnelChartItemViewer extends Dashboard.CustomItemViewer {
   //...
    allowExportSingleItem() {
        return true;
    }
}

The Dashboard control exports custom item data in tabular format. Each column corresponds to a data item.

Customize Exported Documents

You can now customize generated documents (for custom dashboard items) when handling the control’s CustomizeExportDocument event. To help you obtain custom item data and modify the layout of the generated document, we added the following methods in event arguments:

For example, you can generate an XLSX document using the Spreadsheet Document API (included in our Office File API suite) to customize headers:

Refer to the following help topics for more information in this regard:

Pivot Grid Item - Custom Export

Our BI Dashboard control raises the CustomExport event before saving the exported document to PDF and image formats. Use this event to obtain the printable XRPivotGrid control for PivotDashboardItem and customize the Pivot Grid item in the exported document.

The example below illustrates the use of different events and customization settings for the XRPivotGrid control (to customize Pivot Grid item elements).

Dashboard for WinForms - How to Customize the Pivot Grid Item on Export

Specifically, the GitHub example listed above addresses the following:

Removes specified columns and rows.
Renames columns.
Removes rows by value.
Resizes columns and rows.
Changes row appearance.
Customizes grand totals.

The strategy outlined in this example is applicable to all CustomExport events as well.

ASPxDashboard.CustomExport
DashboardExporter.CustomExport
DashboardConfigurator.CustomExport
DashboardDesigner.CustomExport
DashboardViewer.CustomExport
DashboardControl.CustomExport
IDashboardControl.CustomExport

What’s New in v23.1

Refer to the following web page to learn more about our most recent BI Dashboard release (and rate the release by voting in our online poll): Business Intelligence Dashboard v23.1.

Reporting & BI Dashboard Data Sources — EF Dependency Injection, SqlDataSource Service Queries (v23.1)

Boris Zaitsev (DevExpress) — Wed, 02 Aug 2023 23:15:00 Z

In this post, I’ll summarize a set of enhancements introduced in v23.1 for SQL and Entity Framework data sources used in our Reporting and BI Dashboard products.

Resolve Entity Framework Core Context from the ASP.NET Core Dependency Injection Container

An ASP.NET Core application using Entity Framework supplies data to a report/dashboard as a DbContext object.

This object works in the scope of an HTTP request whose lifetime differs from those of a report/dashboard. A report is created in the HTTP request context and starts a background thread to obtain data and create a document. Because a report needs data after the initial HTTP request is completed and a dashboard uses cashed data source in a control, the default DbContext instance created by Entity Framework (in the scope of the HTTP request) cannot be used.

We now offer developers a way to resolve the appropriate Entity Framework Core context from the ASP.NET Core dependency injection container for dashboards/reports bound to an Entity Framework data source.

The following new API is used to create a custom service that returns a context object from the dependency injection container:

The following code snippet implements a custom service that allows you to obtain the appropriate EF Core Context:


using DevExpress.Data.Entity;
using DevExpress.DataAccess.Web;
using System;
using Microsoft.Extensions.DependencyInjection;
namespace WebEFCoreApp.Services {
    public class CustomEFContextProviderFactory : IEFContextProviderFactory {
        private readonly IServiceProvider serviceProvider;
        public CustomEFContextProviderFactory(IServiceProvider serviceProvider) {
            this.serviceProvider = serviceProvider;
        }
        public IEFContextProvider Create() {
            return new CustomEFContextProvider(serviceProvider.CreateScope());
        }
    }
    public class CustomEFContextProvider : IEFContextProvider, IDisposable {
        private readonly IServiceScope scope;
        public CustomEFContextProvider(IServiceScope scope) {
            this.scope = scope;
        }

        public object GetContext(string connectionName, Type contextType) {
            // Returns the context for the specified `EFDataSource.ConnectionName`. 
            if (connectionName == "efCoreConnection")
                return scope.ServiceProvider.GetRequiredService(contextType);
            return null;
        }
        public void Dispose() {
            scope.Dispose();
        }
    }


namespace DXWebApplication1 {
    public class Startup {
        public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
            Configuration = configuration;
        }
        public void ConfigureServices(IServiceCollection services) {
            // ...
            services.ConfigureReportingServices(configurator => {
                configurator.ConfigureWebDocumentViewer(viewerConfigurator => {
                    // ...
                    viewerConfigurator.RegisterEFContextProviderFactory();
                });
                configurator.UseAsyncEngine();
            });
            services.AddDbContext(options => options.UseSqlite("Data Source=file:Data/nwind.db"), ServiceLifetime.Transient);
        }
    }
}

Review the following examples to learn more about our implementation:

Configure SqlDataSource Service Queries

Intercept SQL Operations and Commands

v23.1 ships with new IDBCommandInterceptor and IDBConnectionInterceptor interfaces.

These interfaces allow you to intercept, modify, and/or suppress SQL operations and commands while establishing a connection to a database. The list includes low-level database operations such as executing a command or setting a key-value pair in a session context. Once the connection is open, you can store values in the session context and execute a desired request.

The following examples address specific usage scenarios:

Set Isolation Levels

We also added ConnectionOptions.IsolationLevel and SqlQuery.IsolationLevel properties to help specify the isolation level used to isolate one transaction from another.

You can set IsolationLevel to one of the following values:

None
ReadUncommitted
ReadCommitted
RepeatableRead
Serializable
Snapshot

Each time a query is executed, a corresponding transaction type will be opened (except for the None). Once the request is executed, the transaction is immediately closed.

The benefits of this strategy are as follows:

Set Isolation Level in the UI via the property grid dialog. You do not need to create a stored procedure to set the transaction level or write any code.
Execute queries without SQL database locking. This can significantly reduce query times.

What’s New in v23.1

Refer to the following web page to learn more about our most recent release (and rate the release by voting in our online poll): Our Newest Features (v23.1).

DevExpress BI Dashboard — Trend Indicators (v23.1)

Polina Fedorova (DevExpress) — Sun, 16 Jul 2023 23:00:00 Z

As you may already know, DevExpress BI Dashboard v23.1 supports use of Trend Indicators within Dashboard Chart items.

Trend indicators help communicate data trends over time – allowing users to uncover patterns and analyze complex datasets more effectively.

Our BI Dashboard supports the following trend indicators (across all supported platforms):

Trend line (ChartTrendLine): displays the general direction of associated points (often used to identify existing data trends and forecast future trends).
Regression line (ChartRegressionLine): visualizes data using a mathematical formula that minimizes the distance between the line itself and associated data points (often used to model the relationship between two variables and can be used to make predictions about one variable based on the value of the other variable).
Custom Indicator (ChartCustomIndicator): allows you to add your own indicator type to visualize sales trends and render financial patterns.

You can create, edit, and delete these indicators both via the Dashboard's UI and in code.

End-User Experience

End-users can manage a trend indicator collections via the Dashboard's UI.

In the Web Dashboard designer, click Trend Indicators in the Options dialog to open the Trend Indicators editor.
In the WinForms Dashboard designer, click the Trend Indicators button in the Ribbon's Analysis group (Data Ribbon page). This command invokes the Trend Indicators editor dialog. The editor allows users to create/edit/delete a trend indicator.

A new indicator is generated using default settings. Users can change indicator type, appearance setting, or settings specific to the chart series type (for example, users can select the values with which financial series indicators will be calculated: open, high, low, or close).

Refer to the following help topics for more information:

Runtime

At runtime, you need to create a ChartTrendLine or ChartRegressionLine object and add it to ChartDashboardItem.Indicators. Once complete, use the API listed below to specify indicator settings.

This property is required and displays the indicator in a Chart dashboard item when you launch the application:

Value

If you do not specify the following properties, default values will be used:

The following code snippet creates a “Sales Trend” indicator for an ASP.NET Core dashboard application:

using DevExpress.DashboardCommon;
using System.Drawing;
// ...
public partial class CustomIndicatorDashboard : DevExpress.DashboardCommon.Dashboard {
    public CustomIndicatorDashboard() {
        InitializeComponent();
        ChartDashboardItem chartItem = Items.First(x => x.ComponentName == "chartDashboardItem1") as ChartDashboardItem;
        ChartTrendLine trendLine = new ChartTrendLine();
        SimpleSeries simpleSeries = chartItem.Panes[0].Series[0] as SimpleSeries;
        if (simpleSeries != null) {
            trendLine.Value = simpleSeries.Value.UniqueId;
        }
        trendLine.Name = "SalesTrend";
        trendLine.ValueLevel = DevExpress.XtraCharts.ValueLevel.Value;
        trendLine.Color = Color.Orange;
        trendLine.LegendText = "Sales Trend";

        chartItem.Indicators.Add(trendLine);
    }
}

Add a Custom Indicator Type

You can create your own custom indicator type to address a specific business requirement:

Create a ChartCustomIndicator descendant that accepts a collection of data points, evaluates values, and returns resulting points. These points are used to draw the indicator.
Register the resulting type in IndicatorFactory to make this class available as an indicator type.

If using the Web Dashboard, register ChartIndicatorsExtension before the control is rendered (to add the custom indicator type to the Trend Indicators editor).

The following code snippet implements/registers a “Moving Average” custom indicator type in an ASP.NET Core dashboard application:

using DevExpress.DashboardCommon;
using DevExpress.DashboardCommon.ViewerData;
using System.Collections.Generic;

namespace asp_net_core_dashboard_control_trendline_indicators.Data {
    public class MovingIndicator : ChartCustomIndicator {
        protected override Dictionary<AxisPoint, object> Calculate(Dictionary<AxisPoint, decimal?> values) {
            var items = new Dictionary<AxisPoint, object>(values.Count);

            var sum = decimal.Zero;
            var count = 0;
            foreach(KeyValuePair<AxisPoint, decimal?> point in values) {
                if(count == 0) {
                    items.Add(point.Key, null);
                } else {
                    items.Add(point.Key, sum / count);
                }
                sum += point.Value ?? 0;
                count++;
            }

            return items;
        }
    }
}

Call the Register method in your application before you save and load the dashboard (to serialize and deserialize the indicator within the dashboard's XML).

using DevExpress.DashboardWeb;
using TrendIndicators.Data;

namespace TrendIndicators {
    public static class DashboardUtils {
        public static DashboardConfigurator CreateDashboardConfigurator(IConfiguration configuration, IFileProvider fileProvider) {
            DashboardConfigurator configurator = new DashboardConfigurator();
            // ...
            IndicatorFactory.Register<MovingIndicator>("Moving average");
            return configurator;
        }
    }
}
Register ChartIndicatorsExtension before the control is rendered to add MovingIndicator type to the Trend Indicators editor.
function onBeforeRender(dashboardControl) {
    // ...
    dashboardControl.registerExtension(new DevExpress.Dashboard.Designer.ChartIndicatorsExtension(dashboardControl, {
        customIndicatorTypes: [ {
                type: 'MovingIndicator',
                displayName: 'Moving Average'
            }
        ]
    }));
}

Open the Trend Indicators editor and add a new trend indicator. If you followed this example, a new Moving Average type will be available in the UI:

If you'd like to incorporate custom trend indicators in your BI Dashboard, please review the following examples to learn more:

What's New in v23.1

If you have yet to review the features/capabilities introduced in our most recent major update, please visit the following webpage and let us know what you think of this release by responding to our online survey: Explore Our Newest Features (v23.1).

BI Dashboard — Early Access Preview (v23.1) — Trend Indicators for Charts, Excel Export for Custom Items and More

Polina Tyureva (DevExpress) — Tue, 18 Apr 2023 00:23:00 Z

Our next major update v23.1 is a couple of months away. As such, we wanted to preview the features we expect to ship this Spring and invite all active DevExpress Universal subscribers to download our Early Access Preview (EAP). Your feedback will help us refine the features described below and allow us to ship the best possible royalty-free BI Dashboard platform in the marketplace.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.
This EAP may not include all features/products we expect to ship in our v23.1 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship later this year.

Custom Items — Export to Excel

v23.1 ships with extended custom dashboard item export capabilities for both WinForms and Web platforms. For the WinForms platform, the Export To drop-down (located within a custom dashboard item’s caption) now includes an Export To Excel option:

The Dashboard control exports custom item data in a tabular format - where each column corresponds to a data item.

In Web platforms, you can display the Export To option for an individual custom dashboard item within your browser-based BI Dashboard by overriding the allowExportSingleItem method in the item’s configuration file:

class FunnelChartItemViewer extends Dashboard.CustomItemViewer { 
   //...
    allowExportSingleItem() {
        return true;
    }
}

Refer to the following GitHub examples for more information (do not forget to install v23.1 first and convert examples). To share feedback, simply create a new DevExpress Support Center ticket.

Customize Exported Documents

The code snippets below demonstrate how you can generate an XLSX document using the Spreadsheet Document API (included in our Office File API suite).

WinForms

Download and convert to v23.1 the following example: Dashboard for WinForms - Custom Items.
Add the DevExpress.Spreadsheet.v23.1.Core.dll and DevExpress.Docs.v23.1.dll assemblies to the project.
Handle the DashboardDesigner.CustomizeExportDocument event and use the code below to customize headers:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Drawing;
using System.Linq;
using System.Windows.Forms;
using DevExpress.DashboardCommon;
using DevExpress.DashboardCommon.ViewerData;
using DevExpress.Spreadsheet;
// ...
dashboardDesigner1.CustomizeExportDocument += DashboardDesigner1_CustomizeExportDocument;
// ...
 private void DashboardDesigner1_CustomizeExportDocument(object sender, CustomizeExportDocumentEventArgs e){
    CustomDashboardItem item = dashboardDesigner1.Dashboard.Items.FirstOrDefault(i => i.ComponentName == e.ItemComponentName) as CustomDashboardItem;
    
    if (item != null) {
        DevExpress.Spreadsheet.Workbook workbook = new DevExpress.Spreadsheet.Workbook();
        Worksheet worksheet = workbook.Worksheets[0];
        
        MultiDimensionalData itemData = e.GetItemData(e.ItemComponentName);
         CustomItemData customItemData = new CustomItemData(item, itemData);

        DashboardFlatDataSource flatData = customItemData.GetFlatData();
        IList<DashboardFlatDataColumn> columns = flatData.GetColumns();
        for (int colIndex = 0; colIndex < columns.Count; colIndex++){
            worksheet.Cells[0, colIndex].Value = columns[colIndex].DisplayName;
            worksheet.Cells[0, colIndex].FillColor = Color.LightGreen;
            worksheet.Cells[0, colIndex].Font.FontStyle = SpreadsheetFontStyle.Bold;
            int headerOffset = 1;
            for (int rowIndex = 0; rowIndex < flatData.Count; rowIndex++)
                worksheet.Cells[rowIndex + headerOffset, colIndex].Value = flatData.GetDisplayText(columns[colIndex].Name, rowIndex);
        }
        workbook.SaveDocument(e.Stream, DocumentFormat.Xlsx);
    }
}

Web

Download and convert to v23.1 the following example: Dashboard for ASP.NET Core - Custom Item Gallery
Install the DevExpress.Document.Processor NuGet package.
Handle the DashboardConfigurator.CustomizeExportDocument event and use the code below to customize headers:

using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardCommon.ViewerData;
using DevExpress.DashboardWeb;
using DevExpress.Spreadsheet;
using System.Collections.Generic;
using System.Drawing;
// ...
    public void ConfigureServices(IServiceCollection services) {
        //...
        services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
            DashboardConfigurator configurator = new DashboardConfigurator();
            // ...
            configurator.CustomizeExportDocument += Configurator_CustomizeExportDocument;

            return configurator;
        });

    private void Configurator_CustomizeExportDocument(object sender, CustomizeExportDocumentWebEventArgs e) {
        CustomDashboardItem item = e.GetDashboardItem("customItemDashboardItem2") as CustomDashboardItem;

        if (item != null) {
            DevExpress.Spreadsheet.Workbook workbook = new DevExpress.Spreadsheet.Workbook();
            Worksheet worksheet = workbook.Worksheets[0];

            MultiDimensionalData itemData = e.GetItemData(e.ItemComponentName);
            CustomItemData customItemData = new CustomItemData(item, itemData);

            DashboardFlatDataSource flatData = customItemData.GetFlatData();
            IList<DashboardFlatDataColumn> columns = flatData.GetColumns();
            for (int colIndex = 0; colIndex < columns.Count; colIndex++) {
                worksheet.Cells[0, colIndex].Value = columns[colIndex].DisplayName;
                worksheet.Cells[0, colIndex].FillColor = Color.LightGreen;
                worksheet.Cells[0, colIndex].Font.FontStyle = SpreadsheetFontStyle.Bold;
                int headerOffset = 1;
                for (int rowIndex = 0; rowIndex < flatData.Count; rowIndex++)
                    worksheet.Cells[rowIndex + headerOffset, colIndex].Value = flatData.GetDisplayText(columns[colIndex].Name, rowIndex);

            }
            workbook.SaveDocument(e.Stream, DocumentFormat.Xlsx);
        }
    }

Improved Content Security Policy Support for ASP.NET Core Applications

As you may already know, a Content Security Policy (CSP) is an additional layer of security that allows the browser to recognize and mitigate certain types of risks. In our previous release (v22.2), we modified our source code to refuse script execution on the client, so you no longer need to specify the script-src 'unsafe-eval' CSP directive. The remaining exceptions are to specify the unsafe-inline keyword for the script-src and style-src directives for our components to work correctly.

In our upcoming release (v23.1), we implemented a nonce-based approach for ASP.NET Core applications. This will allow you to disable inline styles and execution of inline scripts (i.e., to remove the unsafe-inline keyword for script-src and style-src directives). With this approach, we generate a cryptographic nonce (“number used once”), include it in our CSP, and add the nonce value in the nonce attribute in every script/style tag. The browser will only execute inline code that includes the correct nonce value. With this approach, a threat actor cannot include/run a malicious script, because they can’t guess the nonce value. The nonce value regenerates each time you reload the page.

To disable inline styles and execution of inline scripts, use the new Nonce method at the Web Dashboard component level. Refer to the following GitHub example to implement nonce-based CSP in your BI Dashboard ASP.NET Core application:

Dashboard for ASP.NET Core - Content Security Policy (CSP)

Dashboard for Web — Custom Style Editor

v23.1 will allow you to define a custom style for format rules used within Grid, Pivot and Card dashboard items.

When you create a format rule, click on a blank square in the Custom Appearance section to create a custom style:

This action invokes the Custom Style Editor. In it, you can specify text color, background color, and font settings used for the format rule:

Click Save to save the style and apply your settings to the dashboard item:

Online Demo

We published an online demo to illustrate the potential of this feature: BI Dashboard — Demo. The demo allows you to create a format rule for a Grid, Card, or Pivot dashboard item using our new Custom Style Editor. To share feedback, simply create a new DevExpress Support Center ticket.

Dashboard for WinForms — Merged Data Source Wizard Page

We merged the first two pages of our BI Dashboard’s Data Source Wizard. Pages previously used to select data source type and database provider have been replaced with a single page that displays a flat list of all supported data sources.

To invoke the Data Source Wizard, click the New Data Source button in the Data Source Ribbon tab.

We also integrated a search bar to locate a required data source:

The next wizard page now contains connection settings specific to the selected data connection type:

The following Data Source Wizard Customization API members define the new wizard page:

We also added the UseMergedProviderList property for backward compatibility. Set UseMergedProviderList to false to use our previous wizard design.

Chart Dashboard Item — Trend Indicators

v23.1 will allow you to create and display different trend indicator types within Chart dashboard items (across all supported platforms). Trend indicators are statistical tools used to analyze data and identify patterns or relationships between variables.

In this Early Access Preview release, we added support for two types of trend indicators (WinForms): Trend lines and Regression lines.

A Trend line displays the general direction of associated points. It is often used to identify existing data trends and can help forecast future trends.
Unlike a Trend line, a Regression line visualizes data using a mathematical formula that minimizes the distance between the line itself and associated data points. It is used to model the relationship between two variables and can be used to make predictions about one variable based on the value of the other variable.

We are also working to create custom trend indicators and expect to add this functionality once we officially release v23.1.

End-User Experience

The new Trend Indicator button is available in the Ribbon’s Data contextual page (for a Chart dashboard item).

This button opens a new editor window and allows you to create a new Trend Indicator with desired settings:

The following indicator settings are available:

Name - Sets indicator name within the indicators collection.
Type - Specifies indicator type - Trend line or Regression Line.
Value - Sets the data item from the Value section (used to calculate an indicator).
Value Level - Specifies a data point’s value (based on series type). For example, if you use CandleStickSeriesView, you can specify the value used to draw the indicator: Open, High, or Close.
Visible - Specifies whether indicator is displayed within a chart dashboard item.
Caption - Specifies the indicator’s caption displayed in the legend.
Display in Legend - Specifies whether to display the indicator’s caption in the legend.
Dash Style - Sets the dash style used to paint the line.
Color - Specifies line color.
Thickness - Specifies line thickness.

Once you specify all settings, click Apply to display the indicator within a chart dashboard item:

Runtime

At runtime, you need to create a ChartTrendLine or ChartRegressionLine object and add it to ChartDashboardItem.Indicators. Once complete, use the following API to specify indicator settings described above:

Use the following settings to configure trend indicator appearance:

The following code snippet adds the same trend indicator displayed above in code:

using DevExpress.DashboardCommon;
using DevExpress.XtraCharts;

//...

private void btnDrawTrend_Click(object sender, System.EventArgs e) {
    ChartDashboardItem chart = dashboardDesigner.Dashboard.Items.FindFirst(x => x.ComponentName == "chartDashboardItem2") as ChartDashboardItem;
    if (chart != null) {
        dashboardDesigner.Dashboard.BeginUpdate();
        ChartTrendLine trend = new ChartTrendLine();
        OpenHighLowCloseSeries simpleSeries = chart.Panes[0].Series[0] as OpenHighLowCloseSeries;
        if (simpleSeries != null) {
            trend.Value = simpleSeries.Open.UniqueId;
        }
        trend.Name = "trend";
        trend.Color = System.Drawing.Color.Orange;
        trend.ValueLevel = ValueLevel.Value;
        chart.Indicators.Add(trend);
        dashboardDesigner.Dashboard.EndUpdate();
    }
}

Your Feedback Matters

We realize beta-testing is a time-consuming process and we are grateful to those who invest time with our EAP builds. Find the current implementation lacking flexibility? Feel we’ve overlooked a valuable usage scenario? Does our current implementation fail to address your business requirements?

Please post your thoughts in our roadmap survey (if you have not yet voted) OR create a Support Center ticket. We will happily follow up and do what we can to extend the capabilities of our new products/features.

DevExpress BI Dashboard v23.1 — June 2023 Roadmap (Survey Inside)

Dmitry Tokmachev (DevExpress) — Mon, 20 Feb 2023 23:43:00 Z

In this post, we’ll summarize DevExpress BI Dashboard-related development plans for our mid-year update (v23.1) and hopefully address some of your questions along the way. Should you require additional information on a specific feature, or if you’d like to share a business use case that our product does not support, feel free to submit your comments in the survey at the end of this article. We’ll be happy to follow up.

The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This roadmap and the features/products listed within it are subject to change. You should not rely on or use this information to help make a purchase decision about Developer Express Inc products.

Chart Dashboard Item — Display Trendlines and Regression Lines

All Platforms
Released in v23.1

Our next release will allow you to create and display both trend and regression line types within Chart Dashboard Items (across all supported platforms). Trendlines and regression lines are both statistical tools used to analyze data and identify patterns or relationships between variables.

A trendline displays the general direction of associated points. It is often used to identify existing data trends and can help forecast future trends.
Unlike a trendline, a regression line visualize data using a mathematical formula that minimizes the distance between the line itself and associated data points. It is used to model the relationship between two variables and can be used to make predictions about one variable based on the value of the other variable.

Pivot Grid Dashboard Item — Customize Export

All Platforms
Released in v23.1

In our next release, you'll be able to customize Pivot Grid Dashboard Item export results. We'll introduce a public API to help you to obtain the XRPivotGrid object at runtime and specify its setting before data export. For instance, you'll be able to hide rows/columns, modify pivot grid field settings, specify text and data formatting, etc.

Web Dashboard — Create Custom Styles for Conditional Formatting

ASP.NET Core ASP.NET WebForms ASP.NET MVC Blazor
Released in v23.1

Once we release v23.1, you'll be able to define a custom style when creating format rules for Grid, Pivot and Card dashboard items. Our custom style settings dialog will allow you to specify the following style properties:

Font name
Font style
Text color
Background color

Web Dashboard — Content Security Policy — Suppress Inline Styles and Scripts

ASP.NET Core
Released in v23.1

Content Security Policy (CSP) is a security feature that allows web developers to control resources a browser is allowed to load for a given page. One of the directives that can be included in a CSP policy is "unsafe-inline", which, as the name suggests, allows the use of inline JavaScript and CSS. However, the use of inline code can represent a security risk, as it can be easily exploited by attackers to inject malicious code into a web page.

To help developers mitigate this risk, we'll modify our implementation and allow web developers to use a nonce-based approach to allow specific, trusted inline code execution. It's important to note that this nonce-based approach will not only improve the security. It will also increase the performance of the website as the browser will no longer have to evaluate the script or style on every page load.

A nonce-based approach involves the use of a unique, one-time-use value that is generated for each page load and included in the CSP policy. This value, known as a nonce, is then included in the nonce attribute of any executed inline script or style. The browser will only execute inline code that includes the correct nonce value.

The Data Source Wizard Update

WinForms Visual Studio Dashboard Designer
Released in v23.1

We will merge two first pages of our Data Source Wizard integrated into the DevExpress BI Dashboard Designer. Pages once used to select data source type and database provider will be replaced with a single page that displays a flat list of all supported data sources (with integrated search). The following screenshot illustrates the changes you can expect in our v23.1 release cycle (please note - this is an early mockup of the interface):

BI Dashboard Roadmap Survey 2023

Take our online survey to help us finalize our 2023 DevExpress BI Dashboard Roadmap.

We thank you in advance for your assistance. Should you have any questions or concerns, feel free to submit a support ticket via the DevExpress Support Center.

Data Visualization and Analysis — Tips and Tricks (August - September 2022)

Margarita (DevExpress) — Thu, 20 Oct 2022 01:45:00 Z

This post includes a series of interesting support tickets answered throughout August and September. We hope you find the contents of this post interesting and of business value. Should you have any questions about a particular support ticket, feel free to post a comment in the DevExpress Support Center.

Tips & Tricks

BI Dashboard

T1113658 - How to add a watermark to the exported dashboard
https://supportcenter.devexpress.com/ticket/details/t1112628

BI Dashboard for Web Forms

T1112628 - How to hide the "Export To PDF" button for a particular widget
https://supportcenter.devexpress.com/ticket/details/t1094793

Handle the onItemCaptionToolbarUpdated event to customize the toolbar for a specific item. For example, if you need to remove the first export submenu for the Grid dashboard item ("gridDashboardItem1"), you can use the following code:
```
    function onItemCaptionToolbarUpdated(e) {
        if (e.itemName === "gridDashboardItem1") {
            var exportMenu = 
            	e.options.actionItems.find(item => item.name === 'export-menu');
            exportMenu.menu.items.splice(0, 1);
        }
    }
 
```
T1103211 - How to use Count and CountDistinct in calculated fields
https://supportcenter.devexpress.com/ticket/details/t1103211
T1109879 - How to use custom properties to customize Grid column options
https://supportcenter.devexpress.com/ticket/details/t1109879

BI Dashboard for WPF

T1117647 - How to add custom template to Series Labels of the Chart dashboard item
https://supportcenter.devexpress.com/ticket/details/t1117647

You can override ChartItemStyle to customize nested instances of the ChartControl and associated series options. The folowing code snippet modifies the SeriesLabel.ResolveOverlappingMode option:


private void ChartControl_BoundDataChanged(object sender, RoutedEventArgs e) {
    var chart = (ChartControl)sender;
    var d = (XYDiagram2D)chart.Diagram;

    for (int i = 0; i < d.Series.Count; i++) {
        var label = new SeriesLabel();
        label.ResolveOverlappingMode = ResolveOverlappingMode.HideOverlapped;
        label.ElementTemplate = (DataTemplate)this.FindResource("labelTemplate");
        d.Series[i].Label = label;
    }
}


<dx:ThemedWindow.Resources>
    <DataTemplate x:Key="labelTemplate">
        <Label Content="{Binding Path=Text}" Background="LightYellow" BorderThickness="0"/>
    </DataTemplate>
    <DataTemplate x:Key="chartTemplate">
        <dxc:ChartControl Style="{Binding Path=(dxdash:DashboardLayoutItem.ViewStyle), 
        	RelativeSource={RelativeSource TemplatedParent}}"
            BoundDataChanged="ChartControl_BoundDataChanged">
        </dxc:ChartControl>
    </DataTemplate>
</dx:ThemedWindow.Resources>
<Grid>
    <dxdash:DashboardControl x:Name="dashboardControl1">
        <dxdash:DashboardControl.ChartItemStyle>
            <Style TargetType="dxdash:ChartDashboardLayoutItem">
                <Setter Property="ContentTemplate" Value="{StaticResource chartTemplate}"/>
            </Style>
        </dxdash:DashboardControl.ChartItemStyle>
    </dxdash:DashboardControl>
</Grid>

Chart for WinForms

T1113940 - How to modify the color and size of the Heatmap cells
https://supportcenter.devexpress.com/ticket/details/t1113940

Chart for WPF

T1116213 - How to get the position of a point via a click event on a 2DChart using MVVM patterns
https://supportcenter.devexpress.com/ticket/details/t1116213

The correct MVVM approach is to use EventToCommand behavior. Event argument conversion is implemented in the CustomMouseButtonEventArgsConverter.Convert method.


<dxmvvm:Interaction.Behaviors>
    <dxmvvm:EventToCommand
    	Command="{Binding ClickCommand}"
        EventName="MouseDown"
        PassEventArgsToCommand="True"
        EventArgsConverter="{local:CustomMouseButtonEventArgsConverter}"/>
</dxmvvm:Interaction.Behaviors>


public ICommand ClickCommand { get; } = new DelegateCommand(OnClick);

private static void OnClick(Point coordinates) {
	MessageBox.Show(coordinates.ToString());
}

T1115869 - How to get selected item info on XYDiagram2D
https://supportcenter.devexpress.com/ticket/details/t1115869
T1112366 - How to display custom labels for logarithmic x-axis
https://supportcenter.devexpress.com/ticket/details/t1112366

To customize the display of axis labels, define Custom Labels as follows:
```
var label = new CustomAxisLabel(d.sieb, d.sieb.ToString());
((XYDiagram2D)chartControl2.Diagram).AxisX.CustomLabels.Add(label);
```

Chart for Web Forms

T1115381 - How to export the Chart control to PDF in Landscape mode with margins
https://supportcenter.devexpress.com/ticket/details/t1115381

Map for WPF

T1108723 - How to color track/route (MapPolylines) based on data
https://supportcenter.devexpress.com/ticket/details/t1108723

Pivot Grid for WinForms

T1114991 - How to avoid cell merge when exporting the Pivot Grid to XLSX in WYSIWYG mode
https://supportcenter.devexpress.com/ticket/details/t1114991
T1115238 - How to compare two totals and color the total cell based on a comparison result
https://supportcenter.devexpress.com/ticket/details/t1115238
T1113267 - How to get display text for a cell by row and column index
https://supportcenter.devexpress.com/ticket/details/t1113267

Enhancements

Chart for WinForms and WPF

T1110756 - How to extrapolate the Chart's trend line to negative infinity
https://supportcenter.devexpress.com/ticket/details/t1110756

Set the ExtrapolateToNegativeInfinity property to true to extrapolate the Trend Line to negative infinity:

WinForms: TrendLine.ExtrapolateToNegativeInfinity
WPF: TrendLine.ExtrapolateToNegativeInfinity

DevExpress BI Dashboard — Material Design Support — Early Access Preview (v22.2)

Dmitry Tokmachev (DevExpress) — Mon, 03 Oct 2022 01:35:00 Z

The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This blog post and the features/products listed within it are subject to change. You should not rely or use this information to help make a purchase decision about Developer Express Inc products.

In our upcoming major release (v22.2), Material Design support will allow you to display a dashboard in an application that follows Material Design guidelines. This will allow you to maintain a solid design across the entire app.

Web Dashboard components are built atop our JavaScript component suite (DevExtreme).

DevExtreme supports two theme sets: original and compact. The original DevExtreme Material themes are great for mobile UI or touch-friendly interfaces (they use large editors, buttons, and tall data grid rows).

Unfortunately, default-sized elements are not always helpful for high-density interfaces such as our DevExpress BI Dashboard (since business dashboards tend to be focused on/ working with/ displaying a lot of data).

Considering this, we decided to focus our efforts on the compact Material theme: the original version is not able to retain information detail because of increased spacing between basic elements. In the compact version, we have decreased indents, icons, and font sizes. Since these elements are smaller, you will be able to show more information on the same screen when compared to the original material theme.

Your Feedback Counts — An Original or Compact Theme?

Please be sure to use the survey below to submit your feedback on this subject.

Online Demo

We published an online demo to illustrate our intermediate results: DevExpress BI Dashboard – Material Design Demo. Please use the theme selector drop down in the right upper corner to explore the appearance of the DevExpress Web Dashboard when using different Material themes:

The team and I would love to hear your feedback on our implementation. Feel free to create a Support Center ticket and let us know what you think.

Pivot Grid — An Overview of Latest Enhancements

Margarita (DevExpress) — Wed, 31 Aug 2022 23:05:00 Z

In this post, I’ll summarize Pivot Grid-related enhancements we’ve introduced over our last few release cycles (specifically, API changes designed to simplify product use for those targeting WinForms, WPF, and web platforms).

New Unified Binding API

High on our list of objectives was to deliver a single/unified binding mechanism and to simplify overall Pivot Grid setup.

Pivot Grid fields use our new unified binding mechanism in the following modes:

OLAP
Server
In-Memory (with the Optimized data processing engine enabled)

Our updated API is built upon our fastest engine to date (we call it our Optimized Calculation Engine). As such, our unified API allow you to bind your Pivot Grid to Server Mode/OLAP data sources or to an in-memory source (our new in-memory engine is significantly faster than our older Legacy and LegacyOptimized engines).

If you’ve yet to explore capabilities of our new Pivot Grid data processing engine and want to compare performance to older processing modes, refer to the following help section for more information: Pivot Grid Data Processing Modes.

With that introduction, let’s now look at each available data binding type…

DataSourceColumnBinding

Use the DataSourceColumnBinding class to bind Pivot Grid fields to columns within a data source or to measures/dimensions in an OLAP cube. In previous versions, you had to specify the PivotGridFieldBase.FieldName property to bind Pivot Grid fields to columns within a data source.


PivotGridField statusField = new PivotGridField() {
FieldName = "[Measures].[Internet Revenue Status]",
Area = PivotArea.DataArea, AreaIndex = 2, Caption = "Status", Name = "fieldStatus" };

PivotGridField quarterField = new PivotGridField() {
FieldName = "[Date].[Fiscal].[Fiscal Quarter]",
Area = PivotArea.RowArea, AreaIndex = 2, Caption = "Fiscal Quarter",
Name = "pivotGridField" };

pivotGridControl.Fields.AddRange(new[] { quarterField, statusField });

You can now use the PivotGridField.DataBinding property that is able to receive an instance of this type, along with others I will describe later.


PivotGridField statusField = new PivotGridField() { DataBinding =
new DataSourceColumnBinding("[Measures].[Internet Revenue Status]"),
Area = PivotArea.DataArea, AreaIndex = 2, Caption = "Status", Name = "fieldStatus" };

PivotGridField quarterField = new PivotGridField() { DataBinding =
new DataSourceColumnBinding("[Date].[Fiscal].[Fiscal Quarter]"),
Area = PivotArea.RowArea, AreaIndex = 2, Caption = "Fiscal Quarter",
Name = "pivotGridField" };

pivotGridControl.Fields.AddRange(new[] { quarterField, statusField });

The code snippet above is from our “OLAP KPI” technical demo. To run the demo, you must have our WinForms distribution installed on your machine: OLAP KPI.

ExpressionDataBinding and OlapExpressionBinding

ExpressionDataBinding and OlapExpressionBinding allow you to bind Pivot Grid fields to calculated expressions or MDX expressions (OLAP) respectively. In addition, ExpressionDataBinding can be used to implement the following Pivot Grid features:

Custom Grouping
Custom Summary
Custom Sorting

For instance, the following code snippet from the Alphabetical Grouping sample app groups ProductName field values into three ranges: A-E, F-S, and T-Z (based on the initial characters of product names).


// Create fieldProductName and bind it to the ProductName column in the data source.

PivotGridField fieldProductName = new PivotGridField();
fieldProductName.Area = PivotArea.RowArea;
fieldProductName.Caption = "Product";
fieldProductName.DataBinding = new DataSourceColumnBinding("ProductName");
fieldProductName.Name = "fieldProductName";
pivotGridControl.Fields.Add("ProductName");

// Create fieldProductGroup, specify the expression, and bind it to the created field.

PivotGridField fieldProductGroup = new PivotGridField();
fieldProductGroup.Area = PivotArea.RowArea;
fieldProductGroup.Caption = "Product Group";
fieldProductGroup.AreaIndex = 0;
fieldProductGroup.DataBinding = new ExpressionDataBinding(
	"iif(Substring([ProductName], 0, 1) < 'F', 'A-E',
		Substring([ProductName], 0, 1) < 'T', 'F-S', 'T-Z')");
pivotGridControl.Fields.Add(fieldProductGroup);

The benefit here is that you do not need to handle the CustomGroupInterval event as you did in previous versions:


pivotGridControl.CustomGroupInterval += (s, e) => {
	if(!object.Equals(e.Field, fieldProductGroup)) return;
	if(Convert.ToChar(e.Value.ToString()[0]) < 'F') {
		e.GroupValue = "A-E";
	return;
	}
	if(Convert.ToChar(e.Value.ToString()[0]) > 'E' &x;&x;
	Convert.ToChar(e.Value.ToString()[0]) < 'T') {
	e.GroupValue = "F-S";
	return;
	}
	if(Convert.ToChar(e.Value.ToString()[0]) > 'S')
	e.GroupValue = "T-Z";
};

pivotGridControl.RefreshData();

Note: If you use our updated Binding API, previous grouping\sorting\summary methods that involved the following events are no longer supported:

New CriteriaOperator Functions

Our Binding API uses expressions for custom grouping. You can also calculate custom summaries, or sort data.

We added a few more expression functions to expand the range of supported usage scenarios:

IsTotal(Dimension1, Dimension2, ...) — Determines whether a total summary value is being calculated. This function helps calculate different total, grand total or last level values in a different manner.

FirstValue(Value) — Returns the first value from rows used in an aggregate value calculation.

WindowFirstValue(SummaryExpression, StartOffset, EndOffset) — Returns the first value of the expression within the window.

Custom Aggregates

We also added the ability to create and register custom aggregate functions within the Expression Editor. Registered functions can be used alongside predefined Pivot Grid methods.

Example: Pivot Grid for WPF - How to Create a Custom Summary to Display the Distinct Value Count

OLAP ADOMD.NET NuGet Package Support

The Pivot Grid now supports the OLAP ADOMD.NET NuGet package for both .NET Framework and .NET. With ADOMD.NET you can read multidimensional schema (more than two axes), initiate queries on cubes, and retrieve results as needs dictate.

Asynchronous Mode

We enhanced the Pivot Grid’s asynchronous mode and made it both more usable and stable.

Pivot Grid can now invoke multiple asynchronous operations simultaneously.
Pivot Grid linked to Filtering UI Context now works in asynchronous mode.
The asynchronous mode API methods now return the Task<> object. This simplifies usage syntax with the await keyword.

The following code snippet from the OLAP Drill Down technical demo creates a drill-down data source for the selected Pivot Grid cell and displays the resulting data source within the DrillDownForm dialog in asynchronous mode.


pivotGridControl.CellDoubleClick += async (s, e) => {
	try {
		pivotGridControl.LoadingPanelVisible = true;
		PivotDrillDownDataSource ds = await e.CreateDrillDownDataSourceAsync();
		pivotGridControl.LoadingPanelVisible = false;
		using(DrillDownForm form = new DrillDownForm(ds))
		form.ShowDialog();
	} catch(Exception ex) {
	pivotGridControl.LoadingPanelVisible = false;
	XtraMessageBox.Show(ex.Message);
	}
};

Documentation

Refer to the help topics below for more information about Pivot Grid enhancements and code examples. Some topics are platform-independent, while others are specific to the WinForms Pivot Grid (Note that a similar set of topics is available for all supported platforms). Of course, feel free to use the search bar in the documentation section of our website to review the API for your platform of choice.

Your Feedback Matters

WinUI Charts — API Enhancements in v22.1

Dmitry Tokmachev (DevExpress) — Thu, 07 Jul 2022 00:29:00 Z

With our v22.1 release, the DevExpress WinUI Chart Control ships with a lightweight API hierarchy to help simplify discoverability. Said simply, we revised the Chart Control’s public API structure and decreased API member nesting levels. We also think our API is more intuitive and MVVM-friendly.

In this blog post, I’ll demonstrate the new settings you’ll need to use to modify the Chart Control.

Axes

First, we removed the AxisBase.AxisLabelOptions property and the respective class itself: The following label properties are available at the AxisBase class level:

The same kind of change was applied to the AxisBase.AxisTitle property and the AxisTitle class. You can now use the following AxisBase class properties to set up a chart’s title options:

We also hid WholeAxisRange and VisualAxisRange classes from the public API. As such, the following API members (used to define both Visual and Whole ranges) are now available at the AxisBaseclass level:

Series

Given the nature of changes we applied to Axes APIs, we used the same pattern for Series.

Properties required to set up Series Label options and Titles for Pie and Funnel view were moved to the base SeriesView class and its descendants for a series. The SeriesView class now features the following API members:

To set up titles for Pie and Funnel views you must now use the following properties:

Finally, the following properties have changed from attached to regular:

Series Hierarchy Changes

With this release, we also modified the way in which Series are used in the Chart Control. A simple rule to remember is that series type now relies on the Chart Control.

Examples below:

CartesianChart – Use CartesianSeries descendants with this chart. For example, the Series class allows you to add a common XY series that takes one value per argument. See the following help topic for more information: CartesianChart - Series and Series Views.

FunnelChart – Use FunnelSeries objects with this chart. See the following section for more information: FunnelChart - Series and Series Views.

PieChart – Use PieSeries objects with this chart. See the following section for more information: PieChart - Series and Series Views.

This API change will allow us to introduce new series types that require two or more values per argument in the future. For example, when we introduce financial series to our WinUI Chart library, we will need four values ("Open", "High", "Low", and "Close") per argument.

Series View Hierarchy Changes

We’ve also revised the hierarchy of available series and removed some series-specific classes like StackedBarSeriesView or DonutSeriesView. For a complete list of classes, please review the following breaking change document: WinUI Charts - Some series view classes have been removed.

The following diagram demonstrates our new series view hierarchy:

Now, if you’d like to create Stacked or Step charts, you need to use the following properties:

To create donuts and nested donuts, use the PieSeriesView class properties:

Refer to the following help topic for a full list of available series views: Charts Gallery.

Data Source Adapter Changes

To simplify data source initialization, we renamed the DataSourceAdapter class to DataSource and simplified data source assignment. With v22.1, you only need to specify ArgumentDataMember and ValueDataMember properties and disregard DataMemberobject creation:

v21.2

<Charts:Series.Data>  
    <Charts:DataSourceAdapter DataSource="{Binding ItemsSource}">       
            <Charts:DataMember DataMemberType="Argument"   
                               ColumnName="PointArgument" 
                               ScaleType="DateTime"/>  
            <Charts:DataMember DataMemberType="Value"  
                               ColumnName="PointValue" 
                               ScaleType="Auto"/>   
    </Charts:DataSourceAdapter>  
</Charts:Series.Data>

v22.1

<Charts:Series.Data> 
    <Charts:DataSource PointSource="{Binding ItemsSource}" 
                       ArgumentDataMember="PointArgument" 
                       ValueDataMember="PointValue"/> 
</Charts:Series.Data>

Data Source & Points

DataPointCollection and DataPoint classes are used to supply static data list to a chart. We renamed these to PointDataCollection and PointData (to follow API naming conventions).

As you can see from the code snippet above, you can now use the DataSource object along with the PointDataCollection list to initialize series data:

We also introduced a base class for point data classes - PointDataBase. The motivation for this change is to create point data entities for new series types in future release cycles. We migrated the following properties from PointData to PointDataBase

Create Series - MVVM Style

You can now create chart series from a collection of view models with the help of the ChartBase.SeriesSource property. The ChartBase.SeriesItemTemplate and ChartBase.SeriesItemTemplateSelector properties allow you to convert a model object to a series.

Here’s a sample:

<UserControl 
    x:Class="ChartsDemo.SeriesSourceDemo.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:ChartsDemo.SeriesSourceDemo" 
    xmlns:dxc="using:DevExpress.WinUI.Charts"> 
        <DataTemplate x:Key="LineSeriesTemplate" x:DataType="local:SeriesViewModel"> 
            <dxc:Series DisplayName="{x:Bind Name}"> 
                <dxc:Series.View> 
                    <dxc:LineSeriesView 
                        ShowMarkers="True" 
                        Brush="{x:Bind ColorIndex, Converter={StaticResource seriesBrushConverter}}" 
                        ToolTipPointPattern="{}{A}: ${V}K" 
                        LegendMarkerTemplate="{StaticResource LineSeries_LegendMarkerTemplate}" /> 
                </dxc:Series.View> 
                <dxc:Series.Data> 
                    <dxc:DataSource 
                        PointSource="{x:Bind DataSource}" 
                        ArgumentDataMember="Category" 
                        ValueDataMember="SalesVolume" /> 
                </dxc:Series.Data> 
            </dxc:Series> 
        </DataTemplate> 
        <DataTemplate x:Key="BarSeriesTemplate" x:DataType="local:SeriesViewModel"> 
            <dxc:Series DisplayName="{x:Bind Name}"> 
                <dxc:Series.View> 
                    <dxc:BarSeriesView Brush="{x:Bind ColorIndex, Converter={StaticResource seriesBrushConverter}}" ToolTipPointPattern="{}{A}: ${V}K" /> 
                </dxc:Series.View> 
                <dxc:Series.Data> 
                    <dxc:DataSource 
                        PointSource="{x:Bind DataSource}" 
                        ArgumentDataMember="Category" 
                        ValueDataMember="SalesVolume" /> 
                </dxc:Series.Data> 
            </dxc:Series> 
        </DataTemplate> 
        <local:SeriesTemplateSelector 
            x:Key="selector" 
            LineSeriesTemplate="{StaticResource LineSeriesTemplate}" 
            BarSeriesTemplate="{StaticResource BarSeriesTemplate}" /> 
    </UserControl.Resources> 
    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto" /> 
            <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <TextBlock 
            Text="Sales Volume (Thousands of USD)" 
            FontSize="18" 
            HorizontalAlignment="Center" 
            TextWrapping="WrapWholeWords" 
            Margin="10" /> 
        <dxc:CartesianChart 
            Grid.Row="1" 
            SeriesSource="{x:Bind ViewModel.Series}" 
            SeriesItemTemplateSelector="{StaticResource selector}" 
            SelectionMode="None" 
            ToolTipEnabled="True" 
            Margin="100,0,100,0"> 
        </dxc:CartesianChart> 
    </Grid> 
</UserControl>

Your Feedback Matters

We would love to know what you think of these WinUI-related enhancements and the changes to our WinUI Chart Control’s API.