{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-stacked-charts",
  "framework": "winui",
  "type": "registry:component",
  "component": "Chart",
  "variant": "stacked-charts",
  "dependencies": [
    "Syncfusion.Chart.WinUI"
  ],
  "description": "Stacked column chart of mobile game market revenue by country with animated series, a ChartLegend, and inner CartesianDataLabelSettings per stack.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/winui/llms.txt",
    "skillPack": "syncfusion/winui-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/winui/chart-stacked-charts.md"
  },
  "files": [
    {
      "target": "src/components/chart-stacked-charts/Chart.xaml",
      "content": "<Page\n    x:Class=\"Syncfusion.ChartDemos.WinUI.Views.StackingColumnChart\"\n    xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"\n    xmlns:local=\"using:Syncfusion.ChartDemos.WinUI\"\n    xmlns:chart=\"using:Syncfusion.UI.Xaml.Charts\"\n    xmlns:common=\"using:Syncfusion.DemosCommon.WinUI\"\n    xmlns:d=\"http://schemas.microsoft.com/expression/blend/2008\"\n    xmlns:mc=\"http://schemas.openxmlformats.org/markup-compatibility/2006\"\n    mc:Ignorable=\"d\"\n    Background=\"Transparent\">\n\n    <Page.DataContext>\n        <local:StackedChartViewModel />\n    </Page.DataContext>\n\n    <Grid x:Name=\"grid\">\n        <Grid.Resources>\n            <ResourceDictionary>\n                <Style TargetType=\"Line\" x:Name=\"axisStyle\">\n                    <Setter Property=\"StrokeThickness\" Value=\"0\"/>\n                    <Setter Property=\"Stroke\" Value=\"Transparent\"/>\n                </Style>\n                <Style TargetType=\"Line\" x:Name=\"majorAxisStyle\">\n                    <Setter Property=\"StrokeThickness\" Value=\"10\"/>\n                    <Setter Property=\"Stroke\" Value=\"Transparent\"/>\n                </Style>\n                \n                <DataTemplate x:Key=\"headerTemplate\">\n                    <TextBlock Text=\"Sales\" Padding=\"0,0,0,10\"/>\n                </DataTemplate>\n            </ResourceDictionary>\n        </Grid.Resources>\n        \n        <ScrollViewer VerticalScrollBarVisibility=\"Auto\" VerticalScrollMode=\"Auto\">\n            <common:DemoLayout x:Name=\"demo\" HeaderText=\"This stacked column chart demonstrates the mobile game market by country from 2013 to 2017.\">\n                <common:DemoLayout.Example>\n                    <chart:SfCartesianChart \n                        x:Name=\"Chart\"\n                        Header=\"Mobile Game Market by Country\"\n                        Height=\"420\"\n                        HorizontalAlignment=\"Center\">\n\n                        <chart:SfCartesianChart.XAxes>\n                            <chart:CategoryAxis LabelPlacement=\"BetweenTicks\" ShowMajorGridLines=\"False\" MajorTickStyle=\"{StaticResource axisStyle}\"/>\n                        </chart:SfCartesianChart.XAxes>\n\n                        <chart:SfCartesianChart.YAxes>\n                            <chart:NumericalAxis  Minimum=\"0\" Interval=\"100\" Maximum=\"500\" AxisLineStyle=\"{StaticResource axisStyle}\" MajorTickStyle=\"{StaticResource axisStyle}\"\n                                                    HeaderTemplate=\"{StaticResource headerTemplate}\">\n                                <chart:NumericalAxis.LabelStyle>\n                                    <chart:LabelStyle LabelFormat=\"0'B\" FontSize=\"12\"/>\n                                </chart:NumericalAxis.LabelStyle>\n                            </chart:NumericalAxis>\n                        </chart:SfCartesianChart.YAxes>\n\n                        <chart:SfCartesianChart.Legend>\n                            <chart:ChartLegend IconWidth=\"13\" IconHeight=\"13\" Padding=\"0,0,65,0\"/>\n                        </chart:SfCartesianChart.Legend>\n\n                        <chart:StackedColumnSeries EnableAnimation=\"True\" ItemsSource=\"{Binding StackedColumndData}\" Label=\"UK\"\n                                                  ShowDataLabels=\"True\" XBindingPath=\"Year\" YBindingPath=\"UK\" LegendIcon=\"Circle\"\n                                                   Fill=\"{ThemeResource SeriesBrush5}\">\n                            <chart:StackedColumnSeries.DataLabelSettings>\n                                <chart:CartesianDataLabelSettings Position=\"Inner\"/>\n                            </chart:StackedColumnSeries.DataLabelSettings>\n                        </chart:StackedColumnSeries>\n\n                        <chart:StackedColumnSeries EnableAnimation=\"True\"  ItemsSource=\"{Binding StackedColumndData}\" Label=\"Germany\"\n                                                  ShowDataLabels=\"True\" XBindingPath=\"Year\" YBindingPath=\"Germany\" LegendIcon=\"Circle\"\n                                                   Fill=\"{ThemeResource SeriesBrush4}\">\n                            <chart:StackedColumnSeries.DataLabelSettings>\n                                <chart:CartesianDataLabelSettings Position=\"Inner\" />\n                            </chart:StackedColumnSeries.DataLabelSettings>\n                        </chart:StackedColumnSeries>\n\n                        <chart:StackedColumnSeries EnableAnimation=\"True\"  ItemsSource=\"{Binding StackedColumndData}\" Label=\"France\"\n                                                  ShowDataLabels=\"True\" XBindingPath=\"Year\" YBindingPath=\"France\" LegendIcon=\"Circle\" \n                                                   Fill=\"{ThemeResource SeriesBrush6}\">\n                            <chart:StackedColumnSeries.DataLabelSettings>\n                                <chart:CartesianDataLabelSettings Position=\"Inner\"  />\n                            </chart:StackedColumnSeries.DataLabelSettings>\n                        </chart:StackedColumnSeries>\n\n                        <chart:StackedColumnSeries EnableAnimation=\"True\" ItemsSource=\"{Binding StackedColumndData}\" Label=\"Italy\"\n                                                  ShowDataLabels=\"True\" XBindingPath=\"Year\" YBindingPath=\"Italy\" LegendIcon=\"Circle\" \n                                                   Fill=\"{ThemeResource SeriesBrush7}\">\n                            <chart:StackedColumnSeries.DataLabelSettings>\n                                <chart:CartesianDataLabelSettings Position=\"Inner\" Margin=\"0,0,0,3\" />\n                            </chart:StackedColumnSeries.DataLabelSettings>\n                        </chart:StackedColumnSeries>\n\n                    </chart:SfCartesianChart>\n                </common:DemoLayout.Example>\n                <common:DemoLayout.Xaml>\n                    <x:String xml:space=\"preserve\">\n&lt;chart:SfCartesianChart x:Name=&quot;Chart&quot; Header=&quot;Mobile Game Market by Country&quot;&gt;\n\n    &lt;chart:SfCartesianChart.XAxes&gt;\n        &lt;chart:CategoryAxis LabelPlacement=&quot;BetweenTicks&quot; ShowMajorGridLines=&quot;False&quot; \n                        MajorTickStyle=&quot;{StaticResource axisStyle}&quot;&gt;\n    &lt;/chart:SfCartesianChart.XAxes&gt;\n  \n    &lt;chart:SfCartesianChart.YAxes&gt;\n        &lt;chart:NumericalAxis Maximum=&quot;500&quot; Minimum=&quot;0&quot; Interval=&quot;100&quot; \n                   AxisLineStyle=&quot;{StaticResource axisStyle}&quot; MajorTickStyle=&quot;{StaticResource axisStyle}&quot;\n                   HeaderTemplate=&quot;{StaticResource headerTemplate}&quot;&gt;\n        &lt;chart:NumericalAxis.LabelStyle&gt;\n            &lt;chart:LabelStyle LabelFormat=&quot;0'B&quot; FontSize=&quot;12&quot;/&gt;\n        &lt;/chart:NumericalAxis.LabelStyle&gt;\n        &lt;chart:NumericalAxis/&gt;\n    &lt;/chart:SfCartesianChart.YAxes&gt;\n\n    &lt;chart:SfCartesianChart.Legend&gt;\n        &lt;chart:ChartLegend IconWidth=&quot;13&quot; IconHeight=&quot;13&quot;/&gt;\n    &lt;/chart:SfCartesianChart.Legend&gt;\n                        \n    &lt;chart:StackedColumnSeries EnableAnimation=&quot;True&quot; ItemsSource=&quot;{Binding StackedColumndData}&quot;\n                   XBindingPath=&quot;Year&quot; YBindingPath=&quot;UK&quot; Label=&quot;UK&quot;\n                   ShowDataLabels=&quot;True&quot; LegendIcon=&quot;Circle&quot; Fill=&quot;{ThemeResource SeriesBrush5}&quot;&gt;\n        &lt;chart:StackedColumnSeries.DataLabelSettings&gt;\n             &lt;chart:CartesianDataLabelSettings Position=&quot;Inner&quot;/&gt;\n        &lt;/chart:StackedColumnSeries.DataLabelSettings&gt;\n    &lt;/chart:StackedColumnSeries&gt;\n                        \n    &lt;chart:StackedColumnSeries EnableAnimation=&quot;True&quot; ItemsSource=&quot;{Binding StackedColumndData}&quot;\n                   XBindingPath=&quot;Year&quot; YBindingPath=&quot;Germany&quot; Label=&quot;Germany&quot;\n                   ShowDataLabels=&quot;True&quot; LegendIcon=&quot;Circle&quot; Fill=&quot;{ThemeResource SeriesBrush4}&quot;&gt;\n        &lt;chart:StackedColumnSeries.DataLabelSettings&gt;\n             &lt;chart:CartesianDataLabelSettings Position=&quot;Inner&quot;/&gt;\n        &lt;/chart:StackedColumnSeries.DataLabelSettings&gt;\n    &lt;/chart:StackedColumnSeries&gt;\n                        \n    &lt;chart:StackedColumnSeries EnableAnimation=&quot;True&quot; ItemsSource=&quot;{Binding StackedColumndData}&quot;\n                   XBindingPath=&quot;Year&quot; YBindingPath=&quot;France&quot; Label=&quot;France&quot;\n                   ShowDataLabels=&quot;True&quot; LegendIcon=&quot;Circle&quot;  Fill=&quot;{ThemeResource SeriesBrush6}&quot;&gt;\n        &lt;chart:StackedColumnSeries.DataLabelSettings&gt;\n             &lt;chart:CartesianDataLabelSettings Position=&quot;Inner&quot;/&gt;\n        &lt;/chart:StackedColumnSeries.DataLabelSettings&gt;\n    &lt;/chart:StackedColumnSeries&gt;\n                        \n   &lt;chart:StackedColumnSeries EnableAnimation=&quot;True&quot; ItemsSource=&quot;{Binding StackedColumndData}&quot;\n                   XBindingPath=&quot;Year&quot; YBindingPath=&quot;Italy&quot; Label=&quot;Italy&quot;\n                   ShowDataLabels=&quot;True&quot; LegendIcon=&quot;Circle&quot; Fill=&quot;{ThemeResource SeriesBrush7}&quot;&gt;\n        &lt;chart:StackedColumnSeries.DataLabelSettings&gt;\n             &lt;chart:CartesianDataLabelSettings Position=&quot;Inner&quot; Margin=&quot;0,0,0,3&quot;/&gt;\n        &lt;/chart:StackedColumnSeries.DataLabelSettings&gt;\n    &lt;/chart:StackedColumnSeries&gt;                      \n                        \n&lt;/chart:SfCartesianChart&gt;\n</x:String>\n                </common:DemoLayout.Xaml>\n            </common:DemoLayout>\n        </ScrollViewer>\n    </Grid>\n</Page>\n"
    }
  ]
}