Skip to main content Skip to footer

How To: Implement Advanced Custom Annotations

Charts are commonly used GUI controls for reporting and analysis, developer often look to provide various customization options. This blog looks to implement conditional customization of Axis labels with WPF C1Chart. We already have a documentation article which describes the creation of Custom Annotations using IValueConverter. You can refer to the given for information. However, the above article customize the annotation based on the X axis values. Whereas this blog provides customization depending on the values plotted on Y Axis. First of all, let's have a quick look at the final output that we are going to achieve. The image shows the customized annotations with Red ForeColor where the plotted Y axis values are null. WPF_AxisCustomization Now, when we know what we are looking at the end, we are able to quickly run through the various customization phases.

Define Annotation Template

We have to first of all define the custom template for Axis Labels which will assist us for further customizations moving ahead.



<Window.Resources>  
  <DataTemplate x:Key="lbl">  
    <TextBlock Margin="2,25,5,20" Text="{Binding}" />  
  </DataTemplate>  
</Window.Resources>  


Apply DataTemplate to Axis X

Once we have the basic designing ready, we have to set the Template in AnnoTemplate property for AxisX object.



<c1chart:C1Chart Name="c1Chart1" ChartType="Column">  

  <c1chart:C1Chart.View>  
    <c1chart:ChartView>  
      <c1chart:ChartView.AxisX>  
       <c1chart:Axis AnnoTemplate="{StaticResource lbl}"  AnnoCreated="Axis_AnnoCreated"/>  
       </c1chart:ChartView.AxisX>  
      </c1chart:ChartView>  
  </c1chart:C1Chart.View>  

  <c1chart:C1ChartLegend DockPanel.Dock="Right" />  
</c1chart:C1Chart>  


In the above XAML code, observe that the AnnoCreated event is defined. This is the event which will provide the option to capture the rendering of individual Annotations for customization.

Customize Annotations

In this final code block, we retrieve the corresponding value plotted on Y Axis for each annotation from the DataSeries. Once we have the value, it becomes pretty easy to apply our logic and customize the AnnoTemplate control.


private void Axis_AnnoCreated(object sender, AnnoCreatedEventArgs e)  
{  
  if (((c1Chart1.Data.Children[0] as DataSeries).ValuesSource as ObservableCollection<double?>)[e.Index] == null)  
    (e.Label as TextBlock).Foreground = new SolidColorBrush(Colors.Red);  
}  

This brings us to the end of this small implementation. Fairly easy right??? Well, this is just the tip of the iceberg. You can do more than this. Refer to the attached sample for complete implementation. Download Sample

MESCIUS inc.

comments powered by Disqus