We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add WPF SfChart inside the SfDataGrid?

Platform: WPF |
Control: SfChart

The following steps describe how to add the WPF SfChart inside the SfDataGrid.

Step 1: Create an instance of the GridTemplateColumn class, and add it to the Columns property in the SfDataGrid to display the custom content specified in the CellTemplate.

XAML:

<syncfusion:SfDataGrid>
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTemplateColumn>
        </syncfusion:GridTemplateColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

 

Step 2: Then, add the SfChart control to the CellTemplate property as custom template content as demonstrated in then following code sample.

XAML:

<syncfusion:SfDataGrid>
        <syncfusion:SfDataGrid.Resources>
            <local:ItemsSourceConverter x:Key="converter" />
            <local:MaximumConverter x:Key="maximumConverter" />
        </syncfusion:SfDataGrid.Resources>
 
      <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTemplateColumn>
          <syncfusion:GridTemplateColumn.CellTemplate>
            <DataTemplate>
              <Grid>
              <chart:SfChart SideBySideSeriesPlacement="False">
                  <chart:SfChart.ColumnDefinitions>
                       <chart:ChartColumnDefinition />
                       <chart:ChartColumnDefinition />
                  </chart:SfChart.ColumnDefinitions>
 
                  <chart:SfChart.PrimaryAxis>
                       <chart:NumericalAxis IsInversed="True" ShowGridLines="False" Visibility="Collapsed" />
                  </chart:SfChart.PrimaryAxis>
 
                  <chart:SfChart.SecondaryAxis>
                        <chart:NumericalAxis IsInversed="True" Maximum="{Binding Maximum}"
                            ShowGridLines="False" Visibility="Collapsed" />
                  </chart:SfChart.SecondaryAxis>
 
                  <chart:BarSeries Interior="LawnGreen" XBindingPath="XValue"
                   ItemsSource="{Binding., Converter={StaticResource converter}}" YBindingPath="YValue1">
                  </chart:BarSeries>
 
                  <chart:BarSeries Interior="Red" XBindingPath="XValue" YBindingPath="YValue2"
                             ItemsSource="{Binding., Converter={StaticResource converter}}">
                       <chart:BarSeries.YAxis>
                            <chart:NumericalAxis ShowGridLines="False" Maximum="{Binding Maximum}"
                                  chart:ChartBase.Column="1" Visibility="Collapsed" />
                         </chart:BarSeries.YAxis>
                    </chart:BarSeries>
 
               </chart:SfChart>
               </Grid>
             </DataTemplate>
          </syncfusion:GridTemplateColumn.CellTemplate>
       </syncfusion:GridTemplateColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

 

ItemsSourceConverter:

public class ItemsSourceConverter : IValueConverter
{
     public object Convert(object values, Type targetType, object parameter, CultureInfo culture)
     {
          var data = values as OrderInfo;
          var collection = new ObservableCollection<Model>();
          Model model = new Model() { XValue = data.XValue, YValue1 = data.YValue1, YValue2 = data.YValue2 };
          data.Models.Add(model);
          collection.Add(model);
          return collection;
      }
 
      object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
      {
           return value;
      }
}

 

Output:

SfChart inside the SfDatagrid cell

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile