This is a migrated thread and some comments may be shown as answers.

Y-Axis formatting in line/bar charts

4 Answers 115 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 10 Mar 2011, 11:40 PM
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
 

4 Answers, 1 is accepted

Sort by
0
Mike
Top achievements
Rank 1
answered on 14 Mar 2011, 05:57 PM
any options here?
0
Yavor
Telerik team
answered on 15 Mar 2011, 09:13 AM
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"
    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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Mike
Top achievements
Rank 1
answered on 16 Mar 2011, 09:44 PM
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
0
Yavor
Telerik team
answered on 21 Mar 2011, 09:39 AM
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
Tags
Chart
Asked by
Mike
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
Yavor
Telerik team
Share this question
or