Styling Axis Labels, Axis Titles, Rotating Axis Labels
Posted by Andrew BT on 23 May 2014 12:09 PM

The XAML Styling demo in our examples suite shows how to style all aspects of the SciChartSurface, including:

  • Axis Label Font, Color, FontWeight, Superscript
  • Axis Label Rotation (vertical, horizontal labels)
  • Axis Title Templating
  • Axis Title Font Size
  • Chart background, Charg Panel Background
  • Grid line color
  • Grid lines as dashed lines
  • Axis Bands
  • Chart Borders

 

How to Change the Foreground, FontSize and Alignment of Axis Labels

Use the following code to change the Axis label properties

<Style x:Key="LeftAxisLabelStyle" TargetType="s:DefaultTickLabel">
	<Setter Property="Foreground" Value="Green"/>
	<Setter Property="FontSize" Value="15"/>
	<!-- Align labels to the left side by using the AnchorPoint (docking point) on the right -->
	<Setter Property="HorizontalAnchorPoint" Value="Right"/>
</Style>
		
<NumericAxis TickLabelStyle="{StaticResource AxisLabelStyle}"/}"/>

How to Rotate Axis Labels

Use the following code to apply a RenderTransform to each label

<!-- Using the LayoutTransform is much more apropriate in this point -->
<!-- the RenderTransform is used for demonstration purposes only, -->
<!-- for the compatibility with Silverlight reasons -->
<Style x:Key="AxisLabelStyle" TargetType="s:DefaultTickLabel">
	<Setter Property="RenderTransform">
		<Setter.Value>
			<RotateTransform Angle="-15"/>
		</Setter.Value>
	</Setter>
</Style>

<NumericAxis TickLabelStyle="{StaticResource AxisLabelStyle}"/}"/>

How to Template the Axis Title

To insert a custom Control into the Axis Title, you can use this code

<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>

<s:DateTimeAxis TitleStyle="{StaticResource BottomAxisTitleStyle}" />

 

Is there anything else you want to style on the axis? Let us know in the comments and we will add to the article!

 

(2 vote(s))
Helpful
Not helpful

Comments (1)
Maram
01 April 2015 12:01 AM
When creating dgnaoail hashes, you are stuck with empty pixels at the corners with this approach. It is more evident if you change your visualbrush to use just a single path at a dgnaoail (0,10 to 10,-10). You will see what appears to be small gaps at the corners. An alternative way would be to always create the lines vertical or horizontal and set the transform on the brush to be rotate the entire brush.

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725