Adjusting Left/Right Axis label text-alignment

Answered

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

bstapylton asked 6 years ago

You must login to post comments

Answers (2)

Best Answer

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

Andrew answered 5 years ago
last edited 4 years ago

You must login to post comments

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

Andrew answered 6 years ago

- bstapylton
- 6 years ago
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
- 6 years ago
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 login to post comments

Your Answer

Please login first to submit.