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

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.

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

  • You must to post comments
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.