Y-Axis formatting in line/bar charts

[Mike]

Hello,

We have the requirement to format the labels on the Y-Axis as times (3:00,4:00,5:00, etc). From what I can tell, the control converts all data to doubles and I can only supply a standard .NET format string.  Is there a simple solution for this?

Thanks,

Mike
 

[Mike]

any options here?

[Yavor]

Hello Mike,

You can format the values along the y axis, by using a custom format string:

Chart1.DefaultView.ChartArea.AxisY.DefaultLabelFormat

If this does not meet your requirements well, you can have more complete control over the YAxis, and the labels. You can use a converter, to convert the default value, to whatever format/value suits your scenario best. A sample setup for the xaml may look like this:

<UserControl x:Class="Chart.Q3.Fixes.Empty.Empty2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
             xmlns:converter="clr-namespace:Chart.Q3.Fixes.Empty"
             xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
             xmlns:Chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
             xmlns:local="clr-namespace:Chart.Q3.Fixes.Empty"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>

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

        <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?>
                        <primitives:LayoutTransformControl x:Name="PART_LayoutTransformControl"
                                                       VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                                       HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                            <primitives:LayoutTransformControl.Content>
                                <TextBlock Style="{TemplateBinding ItemLabelStyle}"
                                       Text="{Binding Converter={StaticResource DateConverter}}" />
                            </primitives:LayoutTransformControl.Content>
                            <primitives:LayoutTransformControl.LayoutTransform>
                                <RotateTransform x:Name="PART_RotateTransform" />
                            </primitives:LayoutTransformControl.LayoutTransform>
                        </primitives:LayoutTransformControl>
                        <?SILVERLIGHT END?>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Chart:RadChart x:Name="Chart1">
        </Chart:RadChart>

    </Grid>
</UserControl>

and the converted is a pretty standard one, as shown below:

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 == "CustomYFormat" && (value as TickPoint).Value.ToString().Length>3 )
           {
               returnValue = (value as TickPoint).Value.ToString().Substring(0, 3) + "Custom text";
           }
           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;
       }
   }

I hope this information helps.

All the best,
Yavor
the Telerik team

[Mike]

Yavor, that was exactly what we were looking for thank you.  Is there a way to re-template the annotation tooltip on the chart as well?  The tooltip has the same requirement as the axis labels.

Mike

[Yavor]

Hi Mike,

For customizing the tooltip, you can take a slightly different approach. This is elaborated on in the following help article:

http://www.telerik.com/help/silverlight/radchart-features-tooltips.html

The last section, "Customizing Tooltip Content" includes more information along the lines of customizing the tooltip.
I hope this information helps.

Kind regards,
Yavor
the Telerik team