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

How to horizontally center align label in DateTimeContinuousAxis?

9 Answers 324 Views
Chart for XAML
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Andrea
Top achievements
Rank 1
Andrea asked on 16 Jan 2013, 05:14 AM

Hello,

I'm using a DateTimeContinuousAxis in order to show a chart for entire week: MinDateValue is the start date of the week and MaxDateValue is the end date of the week. For each day I can have more than one point.
How can I horizontally center align the axis label for each major step (in my sample a major step is a day)?
I tried to set LabelStyle but it isn't working.

<telerikChart:RadCartesianChart x:Name="TestChart" Width="640" Height="480" PaletteName="DefaultDark">               
 <telerikChart:RadCartesianChart.HorizontalAxis>
  <telerikChart:DateTimeContinuousAxis  VerticalLocation="Bottom" TickThickness="0"
             Minimum="{Binding MinDateValue}"
             Maximum="{Binding MaxDateValue}"
             MajorStepUnit="Day"
             MajorStep="1"
             LabelFormat="{}{0,0:ddd d}"
             LastLabelVisibility="Hidden"
             LabelStyle="{StaticResource ChartXAxisLabelStyle}"
             />
 </telerikChart:RadCartesianChart.HorizontalAxis>
 <telerikChart:RadCartesianChart.VerticalAxis>
  <telerikChart:LinearAxis />                   
 </telerikChart:RadCartesianChart.VerticalAxis>
 <telerikChart:RadCartesianChart.Grid>
  <telerikChart:CartesianChartGrid MajorLinesVisibility="XY"/>
 </telerikChart:RadCartesianChart.Grid>
 <telerikChart:LineSeries ItemsSource="{Binding Points}">
  <telerikChart:LineSeries.ValueBinding>
   <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
  </telerikChart:LineSeries.ValueBinding>
  <telerikChart:LineSeries.CategoryBinding>
   <telerikChart:PropertyNameDataPointBinding PropertyName="Date"/>
  </telerikChart:LineSeries.CategoryBinding>
 </telerikChart:LineSeries>               
</telerikChart:RadCartesianChart>

<Page.Resources>
        <ResourceDictionary>
            <Style x:Key="ChartXAxisLabelStyle" TargetType="TextBlock">               
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Center" />
            </Style>
        </ResourceDictionary>
    </Page.Resources>

9 Answers, 1 is accepted

Sort by
0
Ivaylo Gergov
Telerik team
answered on 16 Jan 2013, 12:20 PM
Hello Andrea,

Thank you for your interest.

In order to control the position of the axis labels you can use the DateTimeContinuousAxis.PlotMode property. In your case you need to set it to "BetweenTicks".

I hope this information is useful. If you have any other questions do not hesitate to contact us again.

 

Greetings,
Ivaylo Gergov
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Andrea
Top achievements
Rank 1
answered on 17 Jan 2013, 09:22 AM
Hello,

I tried to set PltoMode to BetweenTicks and now labels are aligned to center but points that have Monday as date, are drawn on Tuesday. It seems that all points are shifted of one day.

Greetings,
Andrea Domenichini
0
Ivaylo Gergov
Telerik team
answered on 17 Jan 2013, 03:34 PM
Hi Andrea,

Thank you for getting back to us.

I tried to reproduce this issue but the points seem to be positioned as expected. I have prepared you a project(using the provided code snippet) which can be found in the attached file. Can you please verify if this works correctly on your side, and if yes - can you modify it in order to reproduce the problem?

I am looking forward to your reply.

 

Regards,
Ivaylo Gergov
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Andrea
Top achievements
Rank 1
answered on 18 Jan 2013, 04:39 AM
Hi,

I tried your sample application and I found that the problem is present when I set axix x Minimum and Maximum.
In my chart I have to display an entire week, for example from 5 November to 11 November 2012, so I set axix x Minimum and Maximum values since I don't have always a point for each day.

I modified your sample application to reproduce the problem: you can download it from this link https://skydrive.live.com/redir?resid=9254CCAFCE7EE400!856&authkey=!AAwTz0_MENns1sw

Regards,
Andrea Domenichini
0
Ivaylo Gergov
Telerik team
answered on 18 Jan 2013, 03:51 PM
Hi Andrea,

Changing the PlotMode value does not only reposition the labels -- it actually changes the plotting routine and that is way the observed behavior is expected and by design. When PlotMode is set to "BetweenTicks" the actual plotted value is indeed between the ticks and not on them.

If you want to keep the plotting routine "on ticks" and still reposition the labels, remove the PlotMode setter and use the DateTimeContinuousAxis.LabelTemplate property instead to change the default Margin value of the axis label like this:
<telerikChart:DateTimeContinuousAxis.LabelTemplate>
     <DataTemplate>
         <TextBlock  Text="{Binding}"
                     FontSize="12"
                     Margin="130,4,4,4"
                     />
     </DataTemplate>
 </telerikChart:DateTimeContinuousAxis.LabelTemplate>

I hope this information helps. Let me know if I can assist you in some other way.

 

Regards,
Ivaylo Gergov
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Andrea
Top achievements
Rank 1
answered on 19 Jan 2013, 07:17 AM
Hi,

I'm not able to center horizontally the labels setting TextBlock Margin in LabelTamplate since the labels have different width. I tried to set TextBlock HorizontalAlignment to Center but it's not working.

Regards,
Andrea Domenichini
0
Ivaylo Gergov
Telerik team
answered on 21 Jan 2013, 05:55 PM
Hi Andrea,

We are sorry that the described custom workaround with LabelTemplate/LabelTemplateSelector & margin customization does not suit your scenario but unfortunately there are no additional options that we can suggest besides this one and the out-of-the-box support for Axis.PlotMode control that we already discussed previously in this thread.

 

Regards,
Ivaylo Gergov
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
sasidhar
Top achievements
Rank 1
answered on 21 Oct 2015, 03:03 PM
Can you any one have idea about how to align the point markers on line series. On the line series the point markers were not aligned correctly and they were misplaced and I am using custom point markers 
0
Ivaylo Gergov
Telerik team
answered on 26 Oct 2015, 12:10 PM
Hello,

Could you please attach a screenshot of the actual result and elaborate more on what is the expected result?

Regards,
Ivaylo Gergov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart for XAML
Asked by
Andrea
Top achievements
Rank 1
Answers by
Ivaylo Gergov
Telerik team
Andrea
Top achievements
Rank 1
sasidhar
Top achievements
Rank 1
Share this question
or