Meet the WinUI Chart control: native charts for your WinUI 3 apps 📈

[Pranav Gupta (pranav-gupta-msft)]

Hello WinUI community!

Sometimes a dashboard needs a simple answer: how is the business doing? A line can reveal a trend. A pair of columns can show whether revenue is keeping ahead of expenses. A well-placed label can explain the month that changed everything.

You have asked for a native way to build these experiences, including in #11017, Is there a good charting library for WinUI?.

Windows App SDK 2.5.4-experimental includes Chart, a first-party control in the Microsoft.UI.Xaml.Controls.Charts namespace. It brings line, area and bar series, category and date-time axes, numeric value axes, legends, data labels and markers to your WinUI 3 app.

This is an experimental release. Use it to explore and prototype, and expect APIs to change before the control becomes stable.

A dashboard that tells a story

Meet Contoso Finance, a showcase for a small design studio's business finances and personal savings. Its overview pairs four KPI cards with charts for revenue and expenses, cash balance, an investment portfolio and spending by category.

The KPI cards and navigation use standard WinUI controls. The charts turn the illustrative financial data into comparisons and trends. Calculations such as savings rate, cash runway and category totals belong to the app, not the chart control.

The deeper views use the same building blocks: columns for cash flow, a line for cash on hand, a filled area for portfolio value and horizontal bars for spending.

📊 Compare revenue and expenses

A chart starts with a Chart element and its series. Two vertical BarSeries give us a side-by-side monthly comparison.

Here is the chart from the minimal sample below. The charts prefix maps to Microsoft.UI.Xaml.Controls.Charts:

<charts:Chart x:Name="RevenueChart" Grid.Row="1"
              ShowLegend="True" LegendTitle="Morgan Design Studio"
              Background="Transparent" MinHeight="320" FontSize="18">
    <charts:BarSeries x:Name="Revenue" Title="Revenue"
                      Orientation="Vertical" />
    <charts:BarSeries x:Name="Expenses" Title="Expenses"
                      Orientation="Vertical" />
</charts:Chart>

Each series has an X data slot and a Y data slot. For this chart, month names use a CategoryAxis and dollar amounts use a LinearAxis. Add the axes to Chart.Axes before assigning them to the series; both series can share them.

var months = new CategoryAxis();
var dollars = new LinearAxis
{
    Label = "USD thousands",
    GridLines = GridLines.Major,
    Minimum = 0
};
RevenueChart.Axes.Add(months);
RevenueChart.Axes.Add(dollars);

var labels = new List<string> { "Apr", "May", "Jun", "Jul", "Aug", "Sep" };
foreach (var series in new[] { Revenue, Expenses })
{
    series.XAxis = months;
    series.YAxis = dollars;
    series.XValues = new Samples { ItemsSource = labels };
}
Revenue.YValues = new Samples
{
    ItemsSource = new List<double> { 24.3, 23.1, 25.7, 22.4, 24.9, 27.6 }
};
Expenses.YValues = new Samples
{
    ItemsSource = new List<double> { 16.8, 15.5, 16.2, 15.8, 16.4, 17.1 }
};

Samples supplies one dimension's values. These examples use List<string> for categories, List<double> for amounts and, later, List<DateTimeOffset> for dates. Keep the X and Y lists aligned so each category has its corresponding amount.

For the series in this release, use a CategoryAxis or DateTimeAxis in the X slot and a LinearAxis in the Y slot. Those are data roles: with horizontal bars, the category slot is drawn vertically.

🎯 Make the important point stand out

Most charts have a point the reader should notice first. On the cash-balance view, April's tax payment gets a red triangle and August's record balance gets an orange diamond. A separate dashed line marks the safety floor.

DataLabelOverrides and DataMarkerOverrides customize individual points by zero-based index. With Cash referring to the line series and January at index 0:

var red = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 196, 43, 28));
var orange = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 202, 80, 16));
Cash.DataLabelOverrides[3] = new DataLabelOverride("Tax day 26.3", red);
Cash.DataMarkerOverrides[3] = new DataMarkerOverride(MarkerShape.Triangle, red);
Cash.DataLabelOverrides[7] = new DataLabelOverride("Record 48.2", orange);
Cash.DataMarkerOverrides[7] = new DataMarkerOverride(MarkerShape.Diamond, orange);

These are labels and markers drawn on the chart, not hover tooltips. Use ShowDataLabels and ShowDataMarkers for the rest of the series. There are nine visible marker shapes, including circles, triangles, diamonds and dashes, plus None.

The spending view uses a label override to call out payroll's share of total spend. The app prepares the ranked categories and calculates the percentage; Chart presents the result.

If you replace or reorder a series' data, update its overrides too: index 3 means the fourth point in the new data, not a permanently identified transaction.

🗓️ Put time on the X axis

For portfolio history, use an AreaSeries with a DateTimeAxis. Supply dates as DateTimeOffset values and amounts as doubles. LabelFormat accepts a Windows DateTimeFormatter format string.

This example uses one prepared value per month. After creating Portfolio, adding time to PortfolioChart.Axes, and assigning it to Portfolio.XAxis, the setup is:

var dates = new List<DateTimeOffset>();
var firstMonth = new DateTimeOffset(2025, 10, 1, 12, 0, 0, TimeSpan.Zero);
for (int month = 0; month < 12; month++)
{
    dates.Add(firstMonth.AddMonths(month));
}
var closes = new List<double>
{
    228.8, 234.1, 237.5, 238.9, 240.6, 239.0,
    234.7, 241.2, 257.3, 263.1, 272.4, 286.4
};
Portfolio.XValues = new Samples { ItemsSource = dates };
Portfolio.YValues = new Samples { ItemsSource = closes };
PortfolioChart.Loaded += (_, _) =>
{
    time.IntervalType = DateTimeIntervalType.Month;
    time.LabelFormat = "{month.abbreviated} {year.full}";
};

IntervalType offers Auto, Day, Week, Month and Year. Choose an interval appropriate to the data you supply; changing it does not calculate financial aggregates such as a monthly closing balance. The example applies its interval and label format when the chart loads.

The dashboard's 6M / 1Y / 5Y views illustrate how the same charts can tell different stories as the time window changes. The straightforward update path used here is to build replacement lists and assign new Samples objects to the series.

For this experimental C# sample, use that explicit replacement path rather than assuming an in-place collection change will automatically redraw the chart.

🌗 At home in light and dark

Merge XamlChartsResources alongside XamlControlsResources in App.xaml to supply the chart's styles and theme resources. Axis lines, grid lines and text follow the app theme.

You can also set series Stroke and, for bars and areas, Fill to customize their colors. Contoso Finance uses lighter series colors in its dark presentation. When you supply custom brushes, account for both themes rather than assuming a fixed color will adapt automatically. A transparent chart background lets the surrounding card show through.

Try it out

Install Microsoft.WindowsAppSDK 2.5.4-experimental, read the release notes and explore the experimental Charts API reference.

For this release, the sample below uses WindowsAppSDKSelfContained=true to avoid the framework-dependent resource lookup issue reported in #12115. Its setup also includes both resource dictionaries.

Start building: a minimal finance chart

Start with one view of the same finance scenario: six months of revenue and expenses, with a button to switch themes. This is the minimal sample application, not the full Contoso Finance showcase.

Create a blank WinUI 3 app named FinanceCharts with Microsoft.WindowsAppSDK 2.5.4-experimental. Keep the template's App.xaml.cs, which creates and activates MainWindow. If using another project name, update x:Class and the C# namespace to match.

Add this property to the project's PropertyGroup:

<WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained>

Merge both resource dictionaries in App.xaml:

<Application
    x:Class="FinanceCharts.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:charts="using:Microsoft.UI.Xaml.Controls.Charts">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <charts:XamlChartsResources />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Replace the two window files with the complete code below, then build and run with Debug | x64.

MainWindow.xaml

<Window
    x:Class="FinanceCharts.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:charts="using:Microsoft.UI.Xaml.Controls.Charts"
    Title="Finance charts">
    <Grid x:Name="Root" Padding="28" RowSpacing="24"
          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid ColumnSpacing="24">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel Spacing="6">
                <TextBlock Text="Your business, in view." Style="{ThemeResource TitleTextBlockStyle}" />
                <TextBlock Text="Morgan Design Studio | Monthly revenue and expenses"
                           Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
            </StackPanel>
            <Button Grid.Column="1" Content="Toggle theme" Click="ToggleTheme_Click"
                    VerticalAlignment="Center" />
        </Grid>
        <Border Grid.Row="1" Padding="24" CornerRadius="8" BorderThickness="1"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
            <Grid RowSpacing="16">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <StackPanel Spacing="4">
                    <TextBlock Text="Revenue vs expenses" Style="{ThemeResource SubtitleTextBlockStyle}" />
                    <TextBlock Text="April - September | USD thousands"
                               Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                </StackPanel>
                <charts:Chart x:Name="RevenueChart" Grid.Row="1"
                              ShowLegend="True" LegendTitle="Morgan Design Studio"
                              Background="Transparent" MinHeight="320" FontSize="18">
                    <charts:BarSeries x:Name="Revenue" Title="Revenue"
                                      Orientation="Vertical" />
                    <charts:BarSeries x:Name="Expenses" Title="Expenses"
                                      Orientation="Vertical" />
                </charts:Chart>
            </Grid>
        </Border>
        <TextBlock Grid.Row="2" Text="Illustrative data | Built with the experimental WinUI Chart control"
                   Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Collections.Generic;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls.Charts;
using Microsoft.UI.Xaml.Media;
using Windows.UI;

namespace FinanceCharts;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Root.Loaded += (_, _) =>
        {
            double scale = Root.XamlRoot.RasterizationScale;
            AppWindow.Resize(new Windows.Graphics.SizeInt32((int)(1040 * scale), (int)(720 * scale)));
            UpdateSeriesColors();
        };

        var months = new CategoryAxis();
        var dollars = new LinearAxis
        {
            Label = "USD thousands",
            GridLines = GridLines.Major,
            Minimum = 0
        };
        RevenueChart.Axes.Add(months);
        RevenueChart.Axes.Add(dollars);

        var labels = new List<string> { "Apr", "May", "Jun", "Jul", "Aug", "Sep" };
        foreach (var series in new[] { Revenue, Expenses })
        {
            series.XAxis = months;
            series.YAxis = dollars;
            series.XValues = new Samples { ItemsSource = labels };
        }
        Revenue.YValues = new Samples
        {
            ItemsSource = new List<double> { 24.3, 23.1, 25.7, 22.4, 24.9, 27.6 }
        };
        Expenses.YValues = new Samples
        {
            ItemsSource = new List<double> { 16.8, 15.5, 16.2, 15.8, 16.4, 17.1 }
        };
        Root.ActualThemeChanged += (_, _) => UpdateSeriesColors();
        UpdateSeriesColors();
    }

    private void UpdateSeriesColors()
    {
        bool dark = Root.ActualTheme == ElementTheme.Dark;
        var revenueBrush = new SolidColorBrush(dark
            ? Color.FromArgb(255, 96, 205, 255)
            : Color.FromArgb(255, 0, 103, 192));
        var expensesBrush = new SolidColorBrush(dark
            ? Color.FromArgb(255, 255, 185, 0)
            : Color.FromArgb(255, 202, 80, 16));
        Revenue.Fill = Revenue.Stroke = revenueBrush;
        Expenses.Fill = Expenses.Stroke = expensesBrush;
    }

    private void ToggleTheme_Click(object sender, RoutedEventArgs e)
    {
        Root.RequestedTheme = Root.ActualTheme == ElementTheme.Dark
            ? ElementTheme.Light
            : ElementTheme.Dark;
    }
}

💬 Tell us what you think

Put Chart in an app and tell us where it helps and where you need more. Share your experience in WinUI discussions or file an issue.

Team WinUI

[Bogdan Pătrăucean (bogdan-patraucean)]

I identified a few serious issues with this control:

First, there is an actual bug

Please fix it before stable: #12350

Lacking animations

We should have animations when the data is changing or the user is hovering over it. (this is nice to have)

Lacking fluent design style

It does look like the current control comes from another UI framework, which I'm 90% sure is true, and does not fit the fluent design language in any way. This is how a WinUI chart control should look like:

• issue opened for this too, please upvote it if you agree: Chart control does not follow the fluent design language #12362

---

I don't think the control should leave experimental until it matches fluent design. Feels more like a workaround than a first-party control.

[fengdong9852-ui]

Could you add zoom and pan functionality, as well as a trackball feature, to the charts?

[Mahdi Hosseini (ghost1372)]

there is no pie chart, why?

[Tera (0x5bfa)]

I have so many questions, here's some of them:

• SelfContained constraint is just a bug or by design?
• Why do we have different contract and namespace exclusive to this control, including TableView? Isn't this incredibly inconvenient?
• Why there's no spec of this control? TableView has some already, but this doesn't.
• Why the control including TableView is not open-sourced but resides in the closed source package?
• Is it justified to encourage developers to use experimental packages (even for feedback)?
• Why wasn't Shape used for several chart-related properties? Features such as dash patterns and markers seem like natural candidates for leveraging Shape instead of introducing separate (limiting) APIs. (by United600)

[United600]

I share this sentiment. Where can we find the specification for providing feedback on the design and naming decisions?

There are several obvious design issues that should have been caught early, such as overlapping labels and extremely poor contrast. Additionally, the chart controls do not appear to follow the Fluent design language, which raises concerns about their overall design consistency and review process.

Looking at the API surface raises even more questions. Why wasn't Shape used for several chart-related properties? Features such as dash patterns and markers seem like natural candidates for leveraging Shape instead of introducing separate (limiting) APIs.

[Bogdan Pătrăucean (bogdan-patraucean)]

United600, I did open an issue regarding the fluent design language: #12362, we could discuss about specifics there.

[Mahdi Hosseini (ghost1372)]

Api spec exist
#11769

https://github.com/sundaramramaswamy/microsoft-ui-xaml/blob/356e7b7c8578e2e73930e2f9bc001cc5486bd47b/specs%2FCharts%2FCharts-spec.md

WinUI has no first-party charting control. Microsoft.UI.Xaml.Controls.Charts adds one. The namespace ships in its own API contract, WinUIChartingContract, to track when Charts APIs become available while remaining aligned with Windows App SDK releases.

[United600]

And the spec only reinforces the fact that this control is fundamentally flawed. There's no pointer interaction support, customization options are extremely limited, and the design is overly opinionated. In several areas where a simple Shape would have provided flexibility, the control instead imposes unnecessary constraints and limitations.
Also introduces unnecessary enums and a lot of questionable naming choices.

[Duckhead Software (duckheadsoftware)]

The self-contained restriction is due to a bug in the resource loading system. GA should (although no promises have been made) allow for normal shared deployments.

[Biyakuga Higashiri (Biyakuga)]

The charts don’t look good and don’t align with the Fluent Design Language. Here’s how they should look: