[Solved] Custom label Issue with Chart with Date in X Axis

[sunita]

hello team,

i want to have a custom X-axis for my line chart wherein X-axis we have dates but the format is Month and year (Dec 11). i want it in form of (Q4Y2011) . how can we do this.

Regards,
Sunita

[Evgenia]

Hello Sunita,

RadChart supports both standard and custom date/time format expressions, which you can use to format the series items labels, axes labels and tooltip texts. However, there are cases when the supported format strings for the Chart may fall short in meeting a particular format behavior. In such scenarios, you can customize Axis Labels via a converter.
Steps for achieving this:
1. Retemplate the AxisLabel2D, which is the type for the labels along both the x and y axis:

<Style
    TargetType="telerik:AxisLabel2D">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="ItemLabelStyle">
        <Setter.Value>
            <Style TargetType="TextBlock">
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="Padding" Value="1" />
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:AxisLabel2D">
                <?SILVERLIGHT BEGIN?>
                <telerik:LayoutTransformControl x:Name="PART_LayoutTransformControl" VerticalAlignment="{TemplateBinding VerticalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                    <telerik:LayoutTransformControl.Content>
                        <TextBlock Style="{TemplateBinding ItemLabelStyle}"
                               Text="{Binding Converter={StaticResource DateConverter}}"/>
                    </telerik:LayoutTransformControl.Content>
                    <telerik:LayoutTransformControl.LayoutTransform>
                        <RotateTransform x:Name="PART_RotateTransform" />
                    </telerik:LayoutTransformControl.LayoutTransform>
                </telerik:LayoutTransformControl>
                <?SILVERLIGHT END?>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. Set a DefaultLabelFormat for the axis which will be customized. This default format will be used in the converter, to differentiate between the labels along the x and y axis. This may look something like this:

Chart1.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "CustomXFormat";

3. Include the actual converter in code-behind:

public class DateConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string returnValue;
        TickPoint tickPoint = value as TickPoint;
        if ((value as TickPoint).LabelFormat == "CustomXFormat")
        {
            //Implement custom logic for formatting the XValues and displaying a fiscal period.
            //For example:
            //returnValue = GetFiscalPeriod(...) + DateTime.FromOADate((value as TickPoint).Value).ToString("MMM");
        }
        else
        {
            returnValue = (value as TickPoint).Value.ToString();
        }
        return returnValue;
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string strValue = value as string;
        DateTime resultDateTime;
        if (DateTime.TryParse(strValue, out resultDateTime))
        {
            return resultDateTime;
        }
        return DependencyProperty.UnsetValue;
    }
}

4. Include the converted in the resources section on the page:

<converter:DateConverter x:Key="DateConverter">
</converter:DateConverter>

Greetings,
Evgenia
the Telerik team

[sunita]

hello Evgenia

can you give me the sample example of this.

thanks

Sunita

[Evgenia]

Hello Sunita,

You may find attached a sample project that demonstrates the approach I described in my previous post. The sample is based on the MVVM pattern and you may feel free to customize it per your needs.

Greetings,
Evgenia
the Telerik team