# chart-data-binding

> Four SfChart views (line, column, scatter, doughnut) sharing an SfDataGrid that drives two-way updates to the doughnut center label.

**Framework:** wpf  **Component:** Chart  **Variant:** data-binding

## 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-data-binding.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.SfChart.WPF
dotnet add package Syncfusion.SfGrid.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-data-binding/Chart.xaml

```xaml
<democommon:DemoControl
    x:Class="syncfusion.chartdemos.wpf.ChartDataEditingDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:charts="http://schemas.syncfusion.com/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"
    OptionsSize="400">

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

    <democommon:DemoControl.Resources>

        <DataTemplate x:Key="AxisPercentageLabelTemplate">
            <TextBlock FontSize="9.5" Text="%" />
        </DataTemplate>

        <local:CenterViewSizeConverter x:Key="CenterViewResizer" />

    </democommon:DemoControl.Resources>

    <Grid x:Name="grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="0.5*" />
        </Grid.ColumnDefinitions>

        <Grid.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="../ColorModel.xaml" />
                    <ResourceDictionary Source="/syncfusion.demoscommon.wpf;component/Views/DemoWindowStyle.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Grid.Resources>

        <Grid Margin="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Border Margin="5"
                BorderBrush="#606060"
                BorderThickness="0.5">
            
            <charts:SfChart x:Name="DataEditingChart"
                            Margin="4,10,10,5"
                            AreaBorderThickness="0">

                <charts:SfChart.PrimaryAxis>
                    <charts:DateTimeAxis Interval="2"
                                         LabelFormat="yyyy"
                                         ShowGridLines="False">
                        <charts:DateTimeAxis.LabelStyle>
                            <charts:LabelStyle FontSize="11"/>
                        </charts:DateTimeAxis.LabelStyle>
                    </charts:DateTimeAxis>
                </charts:SfChart.PrimaryAxis>

                <charts:SfChart.SecondaryAxis>
                    <charts:NumericalAxis Interval="30"
                                          PostfixLabelTemplate="{StaticResource AxisPercentageLabelTemplate}"
                                          RangePadding="Round"
                                          TickLineSize="0">
                        <charts:NumericalAxis.LabelStyle>
                            <charts:LabelStyle FontSize="11"/>
                        </charts:NumericalAxis.LabelStyle>
                    </charts:NumericalAxis>
                </charts:SfChart.SecondaryAxis>

                <charts:LineSeries Interior="#D752C7"
                                   ItemsSource="{Binding Data}"
                                   ListenPropertyChange="True"
                                   XBindingPath="XValue"
                                   YBindingPath="YValue" />
            </charts:SfChart>
        </Border>

        <Border Grid.Column="1"
                Margin="5"
                BorderBrush="#606060"
                BorderThickness="0.5">
            
            <charts:SfChart x:Name="chart2" 
                            Margin="4,10,10,5" 
                            AreaBorderThickness="0">

                <charts:SfChart.PrimaryAxis>
                    <charts:CategoryAxis  Interval="2"
                                         LabelFormat="yyyy"
                                         LabelPlacement="BetweenTicks"
                                         LabelsIntersectAction="Hide"
                                         ShowGridLines="False">
                        <charts:CategoryAxis.LabelStyle>
                            <charts:LabelStyle FontSize="11"/>
                        </charts:CategoryAxis.LabelStyle>
                    </charts:CategoryAxis>
                </charts:SfChart.PrimaryAxis>

                <charts:SfChart.SecondaryAxis>
                    <charts:NumericalAxis Interval="30"                                          
                                          PostfixLabelTemplate="{StaticResource AxisPercentageLabelTemplate}"
                                          TickLineSize="0">
                        <charts:NumericalAxis.LabelStyle>
                            <charts:LabelStyle FontSize="11"/>
                        </charts:NumericalAxis.LabelStyle>
                    </charts:NumericalAxis>
                </charts:SfChart.SecondaryAxis>

                <charts:ColumnSeries Interior="#008FFB"
                                     ItemsSource="{Binding Data}"
                                     ListenPropertyChange="True"
                                     XBindingPath="XValue"
                                     YBindingPath="YValue" />    
            </charts:SfChart>
        </Border>

        <Border Grid.Row="1"
                Margin="5"
                BorderBrush="#606060"
                BorderThickness="0.5">

            <charts:SfChart Margin="4,10,10,5" 
                            AreaBorderThickness="0" 
                            x:Name="chart3">

                <charts:SfChart.PrimaryAxis>
                    <charts:DateTimeAxis Interval="2"                                       
                                         LabelFormat="yyyy"
                                         PlotOffset="10"
                                         ShowGridLines="False">
                        <charts:DateTimeAxis.LabelStyle>
                            <charts:LabelStyle FontSize="11"/>
                        </charts:DateTimeAxis.LabelStyle>
                    </charts:DateTimeAxis>
                </charts:SfChart.PrimaryAxis>

                <charts:SfChart.SecondaryAxis>
                    <charts:NumericalAxis Interval="30"
                                          Maximum="120"
                                          Minimum="0"
                                          PostfixLabelTemplate="{StaticResource AxisPercentageLabelTemplate}"
                                          RangePadding="Round"
                                          TickLineSize="0">
                        <charts:NumericalAxis.LabelStyle>
                            <charts:LabelStyle FontSize="11"/>
                        </charts:NumericalAxis.LabelStyle>
                    </charts:NumericalAxis>
                </charts:SfChart.SecondaryAxis>

                <charts:ScatterSeries Interior="#00AEE0"
                                      ItemsSource="{Binding Data}"
                                      ListenPropertyChange="True"
                                      ScatterHeight="13"
                                      ScatterWidth="13"
                                      XBindingPath="XValue"
                                      YBindingPath="Scatter" />

            </charts:SfChart>
        </Border>

        <Border Grid.Row="1"
                Grid.Column="1"
                Margin="5"
                BorderBrush="#606060"
                BorderThickness="0.5">
            
            <charts:SfChart AreaBorderThickness="0" 
                            x:Name="chart4"
                            Margin="5">

                <charts:SfChart.Behaviors>
                    <charts:ChartSelectionBehavior EnableSegmentSelection="True" />
                </charts:SfChart.Behaviors>

                <charts:DoughnutSeries x:Name="doughnutSeries"
                                       ColorModel="{StaticResource CustomPalette}"
                                       DoughnutCoefficient="1"
                                       EnableSmartLabels="True"
                                       ExplodeIndex="1"
                                       ExplodeOnMouseClick="True"
                                       ExplodeRadius="10"
                                       ItemsSource="{Binding Data}"
                                       LabelPosition="Inside"
                                       ListenPropertyChange="True"
                                       Palette="Custom" DoughnutSize="1"
                                       SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                                       XBindingPath="XValue"
                                       YBindingPath="YValue">

                    <charts:DoughnutSeries.CenterView>
                        <ContentControl Width="{Binding ElementName=doughnutSeries, Path=InnerRadius, Converter={StaticResource CenterViewResizer}}" Height="{Binding ElementName=doughnutSeries, Path=InnerRadius, Converter={StaticResource CenterViewResizer}}">
                            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                <TextBlock x:Name="XText"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           FontSize="12"
                                           FontWeight="SemiBold"
                                           Text="{Binding SelectedXValue, Mode=TwoWay}"
                                           TextAlignment="Center"
                                           TextWrapping="Wrap" />
                                <TextBlock x:Name="YText"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           FontSize="13"
                                           Text="{Binding SelectedYValue, Mode=TwoWay}"
                                           TextAlignment="Center"
                                           TextWrapping="Wrap" />
                            </StackPanel>
                        </ContentControl>
                    </charts:DoughnutSeries.CenterView>

                    <charts:DoughnutSeries.AdornmentsInfo>
                        <charts:ChartAdornmentInfo Margin="0"
                                                   FontSize="10"
                                                   SegmentLabelContent="Percentage"
                                                   SegmentLabelFormat="#"
                                                   ShowLabel="True" />
                    </charts:DoughnutSeries.AdornmentsInfo>

                </charts:DoughnutSeries>
            </charts:SfChart>
        </Border>

    </Grid>

        <Border Style="{StaticResource BorderStyle}" BorderThickness="1.5,0,0,0" Grid.Column="1">
            <Grid Margin="10,14">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>

            <TextBlock FontSize="16" Grid.Row="0" HorizontalAlignment="Center" Margin="5,0,10,5" Text="OPTIONS"/>

                <StackPanel Margin="0,40,0,0">
                    <charts:SfDataGrid Name="sfgrid"
                               Margin="5"
                               HorizontalAlignment="Center"
                               AddNewRowPosition="Top"
                               AllowDeleting="True"
                               AllowEditing="True"
                               ColumnSizer="Star"
                               GroupCaptionTextFormat="#"
                               ItemsSource="{Binding Data}"
                               ShowRowHeader="True">

                        <charts:SfDataGrid.Columns>
                            <charts:Columns>
                                <charts:GridDateTimeColumn MappingName="XValue" MinDateTime="1/1/2000" />
                                <charts:GridNumericColumn MappingName="YValue" NumberDecimalDigits="0" />
                                <charts:GridNumericColumn MappingName="Scatter" NumberDecimalDigits="0" />
                            </charts:Columns>
                        </charts:SfDataGrid.Columns>

                    </charts:SfDataGrid>
                </StackPanel>
            </Grid>
    </Border>
    </Grid>

</democommon:DemoControl>

```