# chart-area

> SfChart area series on CategoryAxis and NumericalAxis with custom palette, animated draw-in, tooltip, and a top-docked ChartLegend.

**Framework:** wpf  **Component:** Chart  **Variant:** area

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/wpf/chart-area.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.SfChart.WPF
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-area/Chart.xaml

```xaml
<democommon:DemoControl
    x:Class="syncfusion.chartdemos.wpf.AreaChartDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
    xmlns:democommon="clr-namespace:syncfusion.demoscommon.wpf;assembly=syncfusion.demoscommon.wpf"
    xmlns:local="clr-namespace:syncfusion.chartdemos.wpf"
    xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF">

    <democommon:DemoControl.DataContext>
        <local:AreaChartViewModel />
    </democommon:DemoControl.DataContext>

    <Grid x:Name="grid">
        
        <Grid.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="../ColorModel.xaml" />
                </ResourceDictionary.MergedDictionaries>

                <Style TargetType="Line" x:Key="lineStyle">
                    <Setter Property="StrokeThickness" Value="0"/>
                </Style>

                <DataTemplate x:Key="headerTemplate">
                    <TextBlock Text="Revenue in Millions" Padding="0,2,0,5" FontSize="15"/>
                </DataTemplate>
                
            </ResourceDictionary>
        </Grid.Resources>
        
        <chart:SfChart x:Name="AreaChart" Margin="5" HorizontalAlignment="Center"
            ColorModel="{StaticResource CustomPalette}" Palette="Custom">

            <chart:SfChart.Header>
                <TextBlock TextAlignment="Center" Text="Average Sales Comparison" FontSize="17" Margin="0,10,0,0"/>
            </chart:SfChart.Header>

            <chart:SfChart.Legend>
                <chart:ChartLegend IconHeight="13" IconWidth="13" FontSize="14" ToggleSeriesVisibility="True" Margin="0,0,0,5"/>
            </chart:SfChart.Legend>

            <chart:SfChart.PrimaryAxis>
                <chart:CategoryAxis Interval="2" ShowGridLines="False" EdgeLabelsDrawingMode="Shift" PlotOffsetEnd="10">
                    <chart:CategoryAxis.LabelStyle>
                        <chart:LabelStyle FontSize="12"/>
                    </chart:CategoryAxis.LabelStyle>
                </chart:CategoryAxis>
            </chart:SfChart.PrimaryAxis>

            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis Maximum="4" AxisLineStyle="{StaticResource lineStyle}" MajorTickLineStyle="{StaticResource lineStyle}"
                                Minimum="0" Interval="1" ShowGridLines="True" LabelFormat="0'M" HeaderTemplate="{StaticResource headerTemplate}">
                    <chart:NumericalAxis.LabelStyle>
                        <chart:LabelStyle FontSize="12"/>
                    </chart:NumericalAxis.LabelStyle>
                </chart:NumericalAxis>
            </chart:SfChart.SecondaryAxis>

            <chart:AreaSeries EnableAnimation="True"
                            ItemsSource="{Binding AreaData}"
                            Label="Product A"
                            ShowTooltip="True"
                            XBindingPath="Name"
                            YBindingPath="ProductA" 
                            LegendIcon="Circle"/>            
        </chart:SfChart>
    </Grid>
</democommon:DemoControl>

```