WPF Toolkit Chart Contents are Not Shown on Print Preview

If you are using WPF Toolkit charts and you want to print a chart, the output may not display the data points on the plot area. This may happen when the default template for the data points is used. The default template contains animations that should be removed.

Let’s say we have a column chart. The control used in rendering data points is the ColumnDataPoint class. The default style is shown in the following code.

<Style TargetType="charting:ColumnDataPoint">
    <Setter Property="Background" Value="Orange" />
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:ColumnDataPoint">
                 <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" x:Name="Root">
                     <VisualStateManager.VisualStateGroups>
                         <VisualStateGroup x:Name="CommonStates">
                              <VisualStateGroup.Transitions>
                                   <VisualTransition GeneratedDuration="0:0:0.1" />
                              </VisualStateGroup.Transitions>
                              <VisualState x:Name="Normal" />
                              <VisualState x:Name="MouseOver">
                                  <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
                                   </Storyboard>
                              </VisualState>
                         </VisualStateGroup>
                         <VisualStateGroup x:Name="SelectionStates">
                              <VisualStateGroup.Transitions>
                                   <VisualTransition GeneratedDuration="0:0:0.1" />
                              </VisualStateGroup.Transitions>
                              <VisualState x:Name="Unselected" />
                              <VisualState x:Name="Selected">
                                  <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
                                   </Storyboard>
                              </VisualState>
                         </VisualStateGroup>
                         <VisualStateGroup x:Name="RevealStates">
                              <VisualStateGroup.Transitions>
                                   <VisualTransition GeneratedDuration="0:0:0.5" />
                              </VisualStateGroup.Transitions>
                              <VisualState x:Name="Shown">
                                  <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                   </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Hidden">
                                  <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                   </Storyboard>
                              </VisualState>
                         </VisualStateGroup>
                     </VisualStateManager.VisualStateGroups>
                     <Grid Background="{TemplateBinding Background}">
                         <Rectangle>
                              <Rectangle.Fill>
                                  <LinearGradientBrush>
                                      <GradientStop Color="#77ffffff" Offset="0" />
                                      <GradientStop Color="#00ffffff" Offset="1" />
                                  </LinearGradientBrush>
                              </Rectangle.Fill>
                          </Rectangle>
                         <Border BorderBrush="#ccffffff" BorderThickness="1">
                              <Border BorderBrush="#77ffffff" BorderThickness="1" />
                         </Border>
                         <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0" />
                         <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0" />
                     </Grid>
                     <ToolTipService.ToolTip>
                         <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                     </ToolTipService.ToolTip>
                 </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You can see that the VisualStateManager’s VisualStateGroups property is used. This is mainly used for animations so we can remove it. We can also remove the ToolTipService and the SelectionHighlight and MouseOverHighlight Rectangles. Also, we have to set the root Border’s Opacity property to 1. I don’t know why the background is set to Orange in this style but this can be easily changed to a Blue LinearGradientBrush, which is the default.

<Style TargetType="charting:ColumnDataPoint">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                 <LinearGradientBrush.GradientStops>
                      <GradientStop Color="#FFB9D6F7" Offset="0"/>
                     <GradientStop Color="#FF284B70" Offset="1"/>
                 </LinearGradientBrush.GradientStops>
             </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:ColumnDataPoint">
                 <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="1" x:Name="Root">
                     <Grid Background="{TemplateBinding Background}">
                         <Rectangle>
                              <Rectangle.Fill>
                                  <LinearGradientBrush>
                                      <GradientStop Color="#77ffffff" Offset="0" />
                                      <GradientStop Color="#00ffffff" Offset="1" />
                                  </LinearGradientBrush>
                              </Rectangle.Fill>
                          </Rectangle>
                         <Border BorderBrush="#ccffffff" BorderThickness="1">
                              <Border BorderBrush="#77ffffff" BorderThickness="1" />
                         </Border>
                     </Grid>
                 </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>