Styling Axis Labels, Axis Titles, Rotating Axis Labels
Posted by Andrew BT on 13 February 2019 06:27 PM

Documentation on this topic can be found in the Templating and Styling Chart Parts article.


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

  • Axis Label Font, Color, FontWeight
  • Axis Label Rotation (vertical, horizontal labels)
  • Axis Title Templating
  • Axis Title Font Size
  • Chart background, Chart 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"/>
<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 appropriate in this point -->
<!-- the RenderTransform is used for demonstration purposes only -->
<Style x:Key="AxisLabelStyle" TargetType="s:DefaultTickLabel">
	<Setter Property="RenderTransform">
			<RotateTransform Angle="-15"/>

<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">
					<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)"/>

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

Further Reading

For more information and examples on Axis Styling, please refer to our documentation:

(5 vote(s))
Not helpful

Comments (1)
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.


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


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