Skip to main content Skip to footer

Conditional X Axis Label Customization

Customizing the Axis Labels for C1Chart for WPF has been made easy with the AnnoTemplate feature. You can even customize the appearance as per your requirement based on some condition. In this blog we would have a quick look at the simple implementation to change the ForeColor for X axis labels where the corresponding Y axis values are null and no data point has been plotted.

Define AnnoTemplate

To customize the Axis Labels, we would create Templates with a TextBox. This template is assigned to the AnnoTemplate property for Axis object in XAML.


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

<Grid>  
  <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>  
</Grid>  

Customize Label ForeColor

Once we are done, defining the AnnoTemplate, we are left with small amount of code behind to customize the ForeColor of the Labels based on the Y axis values. Above code snippet implements AnnoCreated event which exposes few argument properties which make the job easier while customizing. Refer to the code below.


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);  
}  

In this code snippet, value from the DataSeries is retrieved at the same index for which the Label is formatted. If the value is null, desired forecolor is set for the TextBlock. Once we have the all the code blocks applied, final output would appear similar to image below. ChartAxisFormatting Refer to the attached sample for complete implementation. Download Sample

MESCIUS inc.

comments powered by Disqus