{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-data-binding",
  "framework": "wpf",
  "type": "registry:component",
  "component": "Chart",
  "variant": "data-binding",
  "dependencies": [
    "Syncfusion.SfChart.WPF",
    "Syncfusion.SfGrid.WPF"
  ],
  "description": "Four SfChart views (line, column, scatter, doughnut) sharing an SfDataGrid that drives two-way updates to the doughnut center label.",
  "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-data-binding.md"
  },
  "files": [
    {
      "target": "src/components/chart-data-binding/Chart.xaml",
      "content": "<democommon:DemoControl\n    x:Class=\"syncfusion.chartdemos.wpf.ChartDataEditingDemo\"\n    xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"\n    xmlns:charts=\"http://schemas.syncfusion.com/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    OptionsSize=\"400\">\n\n    <democommon:DemoControl.DataContext>\n        <local:ChartDataEditingViewModel />\n    </democommon:DemoControl.DataContext>\n\n    <democommon:DemoControl.Resources>\n\n        <DataTemplate x:Key=\"AxisPercentageLabelTemplate\">\n            <TextBlock FontSize=\"9.5\" Text=\"%\" />\n        </DataTemplate>\n\n        <local:CenterViewSizeConverter x:Key=\"CenterViewResizer\" />\n\n    </democommon:DemoControl.Resources>\n\n    <Grid x:Name=\"grid\">\n        <Grid.ColumnDefinitions>\n            <ColumnDefinition Width=\"*\" />\n            <ColumnDefinition Width=\"0.5*\" />\n        </Grid.ColumnDefinitions>\n\n        <Grid.Resources>\n            <ResourceDictionary>\n                <ResourceDictionary.MergedDictionaries>\n                    <ResourceDictionary Source=\"../ColorModel.xaml\" />\n                    <ResourceDictionary Source=\"/syncfusion.demoscommon.wpf;component/Views/DemoWindowStyle.xaml\" />\n                </ResourceDictionary.MergedDictionaries>\n            </ResourceDictionary>\n        </Grid.Resources>\n\n        <Grid Margin=\"5\">\n        <Grid.ColumnDefinitions>\n            <ColumnDefinition />\n            <ColumnDefinition />\n        </Grid.ColumnDefinitions>\n\n        <Grid.RowDefinitions>\n            <RowDefinition />\n            <RowDefinition />\n        </Grid.RowDefinitions>\n\n        <Border Margin=\"5\"\n                BorderBrush=\"#606060\"\n                BorderThickness=\"0.5\">\n            \n            <charts:SfChart x:Name=\"DataEditingChart\"\n                            Margin=\"4,10,10,5\"\n                            AreaBorderThickness=\"0\">\n\n                <charts:SfChart.PrimaryAxis>\n                    <charts:DateTimeAxis Interval=\"2\"\n                                         LabelFormat=\"yyyy\"\n                                         ShowGridLines=\"False\">\n                        <charts:DateTimeAxis.LabelStyle>\n                            <charts:LabelStyle FontSize=\"11\"/>\n                        </charts:DateTimeAxis.LabelStyle>\n                    </charts:DateTimeAxis>\n                </charts:SfChart.PrimaryAxis>\n\n                <charts:SfChart.SecondaryAxis>\n                    <charts:NumericalAxis Interval=\"30\"\n                                          PostfixLabelTemplate=\"{StaticResource AxisPercentageLabelTemplate}\"\n                                          RangePadding=\"Round\"\n                                          TickLineSize=\"0\">\n                        <charts:NumericalAxis.LabelStyle>\n                            <charts:LabelStyle FontSize=\"11\"/>\n                        </charts:NumericalAxis.LabelStyle>\n                    </charts:NumericalAxis>\n                </charts:SfChart.SecondaryAxis>\n\n                <charts:LineSeries Interior=\"#D752C7\"\n                                   ItemsSource=\"{Binding Data}\"\n                                   ListenPropertyChange=\"True\"\n                                   XBindingPath=\"XValue\"\n                                   YBindingPath=\"YValue\" />\n            </charts:SfChart>\n        </Border>\n\n        <Border Grid.Column=\"1\"\n                Margin=\"5\"\n                BorderBrush=\"#606060\"\n                BorderThickness=\"0.5\">\n            \n            <charts:SfChart x:Name=\"chart2\" \n                            Margin=\"4,10,10,5\" \n                            AreaBorderThickness=\"0\">\n\n                <charts:SfChart.PrimaryAxis>\n                    <charts:CategoryAxis  Interval=\"2\"\n                                         LabelFormat=\"yyyy\"\n                                         LabelPlacement=\"BetweenTicks\"\n                                         LabelsIntersectAction=\"Hide\"\n                                         ShowGridLines=\"False\">\n                        <charts:CategoryAxis.LabelStyle>\n                            <charts:LabelStyle FontSize=\"11\"/>\n                        </charts:CategoryAxis.LabelStyle>\n                    </charts:CategoryAxis>\n                </charts:SfChart.PrimaryAxis>\n\n                <charts:SfChart.SecondaryAxis>\n                    <charts:NumericalAxis Interval=\"30\"                                          \n                                          PostfixLabelTemplate=\"{StaticResource AxisPercentageLabelTemplate}\"\n                                          TickLineSize=\"0\">\n                        <charts:NumericalAxis.LabelStyle>\n                            <charts:LabelStyle FontSize=\"11\"/>\n                        </charts:NumericalAxis.LabelStyle>\n                    </charts:NumericalAxis>\n                </charts:SfChart.SecondaryAxis>\n\n                <charts:ColumnSeries Interior=\"#008FFB\"\n                                     ItemsSource=\"{Binding Data}\"\n                                     ListenPropertyChange=\"True\"\n                                     XBindingPath=\"XValue\"\n                                     YBindingPath=\"YValue\" />    \n            </charts:SfChart>\n        </Border>\n\n        <Border Grid.Row=\"1\"\n                Margin=\"5\"\n                BorderBrush=\"#606060\"\n                BorderThickness=\"0.5\">\n\n            <charts:SfChart Margin=\"4,10,10,5\" \n                            AreaBorderThickness=\"0\" \n                            x:Name=\"chart3\">\n\n                <charts:SfChart.PrimaryAxis>\n                    <charts:DateTimeAxis Interval=\"2\"                                       \n                                         LabelFormat=\"yyyy\"\n                                         PlotOffset=\"10\"\n                                         ShowGridLines=\"False\">\n                        <charts:DateTimeAxis.LabelStyle>\n                            <charts:LabelStyle FontSize=\"11\"/>\n                        </charts:DateTimeAxis.LabelStyle>\n                    </charts:DateTimeAxis>\n                </charts:SfChart.PrimaryAxis>\n\n                <charts:SfChart.SecondaryAxis>\n                    <charts:NumericalAxis Interval=\"30\"\n                                          Maximum=\"120\"\n                                          Minimum=\"0\"\n                                          PostfixLabelTemplate=\"{StaticResource AxisPercentageLabelTemplate}\"\n                                          RangePadding=\"Round\"\n                                          TickLineSize=\"0\">\n                        <charts:NumericalAxis.LabelStyle>\n                            <charts:LabelStyle FontSize=\"11\"/>\n                        </charts:NumericalAxis.LabelStyle>\n                    </charts:NumericalAxis>\n                </charts:SfChart.SecondaryAxis>\n\n                <charts:ScatterSeries Interior=\"#00AEE0\"\n                                      ItemsSource=\"{Binding Data}\"\n                                      ListenPropertyChange=\"True\"\n                                      ScatterHeight=\"13\"\n                                      ScatterWidth=\"13\"\n                                      XBindingPath=\"XValue\"\n                                      YBindingPath=\"Scatter\" />\n\n            </charts:SfChart>\n        </Border>\n\n        <Border Grid.Row=\"1\"\n                Grid.Column=\"1\"\n                Margin=\"5\"\n                BorderBrush=\"#606060\"\n                BorderThickness=\"0.5\">\n            \n            <charts:SfChart AreaBorderThickness=\"0\" \n                            x:Name=\"chart4\"\n                            Margin=\"5\">\n\n                <charts:SfChart.Behaviors>\n                    <charts:ChartSelectionBehavior EnableSegmentSelection=\"True\" />\n                </charts:SfChart.Behaviors>\n\n                <charts:DoughnutSeries x:Name=\"doughnutSeries\"\n                                       ColorModel=\"{StaticResource CustomPalette}\"\n                                       DoughnutCoefficient=\"1\"\n                                       EnableSmartLabels=\"True\"\n                                       ExplodeIndex=\"1\"\n                                       ExplodeOnMouseClick=\"True\"\n                                       ExplodeRadius=\"10\"\n                                       ItemsSource=\"{Binding Data}\"\n                                       LabelPosition=\"Inside\"\n                                       ListenPropertyChange=\"True\"\n                                       Palette=\"Custom\" DoughnutSize=\"1\"\n                                       SelectedIndex=\"{Binding SelectedIndex, Mode=TwoWay}\"\n                                       XBindingPath=\"XValue\"\n                                       YBindingPath=\"YValue\">\n\n                    <charts:DoughnutSeries.CenterView>\n                        <ContentControl Width=\"{Binding ElementName=doughnutSeries, Path=InnerRadius, Converter={StaticResource CenterViewResizer}}\" Height=\"{Binding ElementName=doughnutSeries, Path=InnerRadius, Converter={StaticResource CenterViewResizer}}\">\n                            <StackPanel HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\">\n                                <TextBlock x:Name=\"XText\"\n                                           HorizontalAlignment=\"Center\"\n                                           VerticalAlignment=\"Center\"\n                                           FontSize=\"12\"\n                                           FontWeight=\"SemiBold\"\n                                           Text=\"{Binding SelectedXValue, Mode=TwoWay}\"\n                                           TextAlignment=\"Center\"\n                                           TextWrapping=\"Wrap\" />\n                                <TextBlock x:Name=\"YText\"\n                                           HorizontalAlignment=\"Center\"\n                                           VerticalAlignment=\"Center\"\n                                           FontSize=\"13\"\n                                           Text=\"{Binding SelectedYValue, Mode=TwoWay}\"\n                                           TextAlignment=\"Center\"\n                                           TextWrapping=\"Wrap\" />\n                            </StackPanel>\n                        </ContentControl>\n                    </charts:DoughnutSeries.CenterView>\n\n                    <charts:DoughnutSeries.AdornmentsInfo>\n                        <charts:ChartAdornmentInfo Margin=\"0\"\n                                                   FontSize=\"10\"\n                                                   SegmentLabelContent=\"Percentage\"\n                                                   SegmentLabelFormat=\"#\"\n                                                   ShowLabel=\"True\" />\n                    </charts:DoughnutSeries.AdornmentsInfo>\n\n                </charts:DoughnutSeries>\n            </charts:SfChart>\n        </Border>\n\n    </Grid>\n\n        <Border Style=\"{StaticResource BorderStyle}\" BorderThickness=\"1.5,0,0,0\" Grid.Column=\"1\">\n            <Grid Margin=\"10,14\">\n            <Grid.RowDefinitions>\n                <RowDefinition Height=\"auto\" />\n                <RowDefinition Height=\"auto\" />\n            </Grid.RowDefinitions>\n\n            <TextBlock FontSize=\"16\" Grid.Row=\"0\" HorizontalAlignment=\"Center\" Margin=\"5,0,10,5\" Text=\"OPTIONS\"/>\n\n                <StackPanel Margin=\"0,40,0,0\">\n                    <charts:SfDataGrid Name=\"sfgrid\"\n                               Margin=\"5\"\n                               HorizontalAlignment=\"Center\"\n                               AddNewRowPosition=\"Top\"\n                               AllowDeleting=\"True\"\n                               AllowEditing=\"True\"\n                               ColumnSizer=\"Star\"\n                               GroupCaptionTextFormat=\"#\"\n                               ItemsSource=\"{Binding Data}\"\n                               ShowRowHeader=\"True\">\n\n                        <charts:SfDataGrid.Columns>\n                            <charts:Columns>\n                                <charts:GridDateTimeColumn MappingName=\"XValue\" MinDateTime=\"1/1/2000\" />\n                                <charts:GridNumericColumn MappingName=\"YValue\" NumberDecimalDigits=\"0\" />\n                                <charts:GridNumericColumn MappingName=\"Scatter\" NumberDecimalDigits=\"0\" />\n                            </charts:Columns>\n                        </charts:SfDataGrid.Columns>\n\n                    </charts:SfDataGrid>\n                </StackPanel>\n            </Grid>\n    </Border>\n    </Grid>\n\n</democommon:DemoControl>\n\n"
    }
  ]
}