{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-area",
  "framework": "wpf",
  "type": "registry:component",
  "component": "Chart",
  "variant": "area",
  "dependencies": [
    "Syncfusion.SfChart.WPF"
  ],
  "description": "SfChart area series on CategoryAxis and NumericalAxis with custom palette, animated draw-in, tooltip, and a top-docked ChartLegend.",
  "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/wpf/llms.txt",
    "skillPack": "syncfusion/wpf-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/wpf/chart-area.md"
  },
  "files": [
    {
      "target": "src/components/chart-area/Chart.xaml",
      "content": "<democommon:DemoControl\n    x:Class=\"syncfusion.chartdemos.wpf.AreaChartDemo\"\n    xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"\n    xmlns:chart=\"clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF\"\n    xmlns:democommon=\"clr-namespace:syncfusion.demoscommon.wpf;assembly=syncfusion.demoscommon.wpf\"\n    xmlns:local=\"clr-namespace:syncfusion.chartdemos.wpf\"\n    xmlns:skin=\"clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF\">\n\n    <democommon:DemoControl.DataContext>\n        <local:AreaChartViewModel />\n    </democommon:DemoControl.DataContext>\n\n    <Grid x:Name=\"grid\">\n        \n        <Grid.Resources>\n            <ResourceDictionary>\n                <ResourceDictionary.MergedDictionaries>\n                    <ResourceDictionary Source=\"../ColorModel.xaml\" />\n                </ResourceDictionary.MergedDictionaries>\n\n                <Style TargetType=\"Line\" x:Key=\"lineStyle\">\n                    <Setter Property=\"StrokeThickness\" Value=\"0\"/>\n                </Style>\n\n                <DataTemplate x:Key=\"headerTemplate\">\n                    <TextBlock Text=\"Revenue in Millions\" Padding=\"0,2,0,5\" FontSize=\"15\"/>\n                </DataTemplate>\n                \n            </ResourceDictionary>\n        </Grid.Resources>\n        \n        <chart:SfChart x:Name=\"AreaChart\" Margin=\"5\" HorizontalAlignment=\"Center\"\n            ColorModel=\"{StaticResource CustomPalette}\" Palette=\"Custom\">\n\n            <chart:SfChart.Header>\n                <TextBlock TextAlignment=\"Center\" Text=\"Average Sales Comparison\" FontSize=\"17\" Margin=\"0,10,0,0\"/>\n            </chart:SfChart.Header>\n\n            <chart:SfChart.Legend>\n                <chart:ChartLegend IconHeight=\"13\" IconWidth=\"13\" FontSize=\"14\" ToggleSeriesVisibility=\"True\" Margin=\"0,0,0,5\"/>\n            </chart:SfChart.Legend>\n\n            <chart:SfChart.PrimaryAxis>\n                <chart:CategoryAxis Interval=\"2\" ShowGridLines=\"False\" EdgeLabelsDrawingMode=\"Shift\" PlotOffsetEnd=\"10\">\n                    <chart:CategoryAxis.LabelStyle>\n                        <chart:LabelStyle FontSize=\"12\"/>\n                    </chart:CategoryAxis.LabelStyle>\n                </chart:CategoryAxis>\n            </chart:SfChart.PrimaryAxis>\n\n            <chart:SfChart.SecondaryAxis>\n                <chart:NumericalAxis Maximum=\"4\" AxisLineStyle=\"{StaticResource lineStyle}\" MajorTickLineStyle=\"{StaticResource lineStyle}\"\n                                Minimum=\"0\" Interval=\"1\" ShowGridLines=\"True\" LabelFormat=\"0'M\" HeaderTemplate=\"{StaticResource headerTemplate}\">\n                    <chart:NumericalAxis.LabelStyle>\n                        <chart:LabelStyle FontSize=\"12\"/>\n                    </chart:NumericalAxis.LabelStyle>\n                </chart:NumericalAxis>\n            </chart:SfChart.SecondaryAxis>\n\n            <chart:AreaSeries EnableAnimation=\"True\"\n                            ItemsSource=\"{Binding AreaData}\"\n                            Label=\"Product A\"\n                            ShowTooltip=\"True\"\n                            XBindingPath=\"Name\"\n                            YBindingPath=\"ProductA\" \n                            LegendIcon=\"Circle\"/>            \n        </chart:SfChart>\n    </Grid>\n</democommon:DemoControl>\n"
    }
  ]
}