Knowledgebase: Styling, Look and Feel
Adding Color to NumericAxis
Posted by Andrew BT on 16 October 2014 03:22 PM

Q: How can I change the TextColor, Border, Line Color or FontStyle or FontFamily or FontSize of an Axis?

A: We have an example of how to style every element of the chart here:

Styling Axis Text and Borders. This links to an Example here: XAML Styling Silverlight Example

Many of our examples colour the axis borders, text, such as the Multiple XAxis Example and the Quad Left Right YAxis Example

For example, to change an Right-aligned axis to have a single red line border on the left, red text and red gridlines, you can use this code:

XAML (Preferred)

<!-- Creates a Right-aligned YAxis with red border, red gridlines and red text -->
<Style TargetType="{x:Type s:NumericAxis}">
   <Setter Property="MajorGridLineStyle">
	       <Style TargetType="{x:Type Line"}>
		       <Setter Property="Stroke" Value="Red"/>
   <Setter Property="TickLabelStyle">
	       <Style TargetType="{x:Type s:DefaultTickLabel"}>
		       <Setter Property="Label.ForegroundProperty" Value="Red"/>
   <Setter Property="BorderThickness" Value="1,0,0,0"/>
   <Setter Property="BorderBrush" Value="Red"/>


C# (Code Behind)


// Creates a Right-aligned YAxis with red border, red gridlines and red text
Style lineStyle = new Style(typeof(Line));
lineStyle.Setters.Add(new Setter(Line.StrokeProperty, Brushes.Red));

Style labelStyle = new Style(typeof(DefaultTickLabel));
labelStyle.Setters.Add(new Setter(Label.ForegroundProperty, Brushes.Red));

var yAxis1 = new NumericAxis { MajorGridLineStyle = lineStyle, TickLabelStyle = labelStyle, BorderThickness="1,0,0,0", BorderBrush=Brushes.Red };

Hope this helps!
[SciChart Team]

(2 vote(s))
Not helpful


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