SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Answered
3
0

Hey guys,

I’m looking at changing the Numeric Axes on the Right and Left axes of my Chart, to right-align the Text within the Axis Labels.

I noticed this topic where Yuriy hinted that in 2.0 this would be a supported feature, but can’t seem to see what it would be:
http://http://www.scichart.com/questions/question/x-and-y-axis-formatting/
The “work around” featured in that topic doens’t seem to change anything in my situation.

I have tried setting FlowDirection to “RightToLeft”, which does the job, but has some ugly placement side-effects.

Is there something I’ve overlooked?

Thanks,
Miles

WPF
Share
  • You must to post comments
Filter
Sort by: Most Votes
Best Answer
4
0

UPDATE JUNE 2014

Hi Everyone,

Axis Label styling was introduced in SciChart v3.0. You can now set a Style for a label including margins, LayoutTransforms etc…

Please see our SciChart v3.0 Release Notes.

5. Axis Styling improvements

  • Chart Titles, Axis Titles and Labels can now be styled
  • Can set font size, font style, font weight on Axis labels
  • Now supports optional rotation of axis tick labels (e.g. 90 degrees)

Usage: 

<!-- Styling Tick Labels with rotation and custom font-size and foreground -->
<s:DateTimeAxis>
    <s:DateTimeAxis.TickLabelStyle>
        <Style TargetType="s:DefaultTickLabel">
            <Setter Property="Foreground" Value="Blue" />
            <Setter Property="FontSize" Value="25" />
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform Angle="45" />
                </Setter.Value>
            </Setter>
        </Style>
    </s:DateTimeAxis.TickLabelStyle>
</s:DateTimeAxis>

<!-- Styling Numeric Axis Tick Labels -->
<s:NumericAxis>
    <s:NumericAxis.TickLabelStyle>
        <Style TargetType="s:NumericTickLabel">
            <Setter Property="Foreground" Value="Blue" />
            <Setter Property="FontSize" Value="25" />
        </Style>
    </s:NumericAxis.TickLabelStyle>
</s:NumericAxis>
</pre>

<!-- Declare an Axis Title Template -->
<Style x:Key="BottomAxisTitleStyle" TargetType="s:AxisTitle">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Margin="0,3,0,0"
                                Style="{StaticResource TitleTextStyle}"
                                Text="Showing time on"/>
                    <TextBlock HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="{Binding}" />
                    <TextBlock Margin="0,0,0,3"
                                Style="{StaticResource TitleTextStyle}"
                                Text="(daily Timeframe)"/>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Apply an Axis Title Template -->
<s:DateTimeAxis AxisTitle="Time Axis Title" TitleStyle="{StaticResource BottomAxisTitleStyle}"  Style="{StaticResource AxisStyle}"/>

Also the XAML Styling application demonstrates this.

Best regards,
Andrew

Images
  • You must to post comments
0
0

Hi Miles,

Just an update for you – there is a workaround to style axis ticks. We are using this on our XamlStyling example to change the font-size of axis tick labels. Unfortunately it also changes the font size of the axis title.

<s:NumericAxis AxisAlignment="Right" AxisTitle="Axis Right Title" >
    <s:NumericAxis.Resources>
        <!-- Example of styling axis labels--> 
        <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>
    </s:NumericAxis.Resources>
</s:NumericAxis>

As Yuriy said, we are working on this (and other features!) for SciChart v2.5.

Best regards,
Andrew

  • bstapylton
    Hi Andrew, Thanks for this. It worked a treat. Here is my Style that got it working. Note that I had to set the Width of each TextBlock as they were only assuming the minimum width needed to draw - so text-alignment would not have any effect. 
    <Style TargetType="TextBlock">
    <Setter Property="Width" Value="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=axes:NumericAxis}}"/>
    <Setter Property="Padding" Value="0 0 10 0" />
    <Setter Property="TextAlignment" Value="Right" />
</Style>
    Cheers, Miles
  • EJansen
    I also like to right align the Yaxis labels. How long before v2.5 will be released? If this takes a while, do you have an example how to do this in code? I'm adding the axis dynamically so I need to set these properties in code.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.