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

Introduction

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"/>
</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 appropriate in this point -->
<!-- the RenderTransform is used for demonstration purposes only -->
<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}" />

Further Reading

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

• Axis Styling - Templating Axis Labels
• Axis Styling - Styling Gridlines, Tick Lines and Labels
• Axis Styling - Templating the Axis Title
• Axis Styling - Templating the Axis PanelTemplating and Styling Chart Parts
• Templating and Styling Chart Parts