Axis Styling - Styling Gridlines, Tick Lines and Labels

Every aspect of the axis can be styled, including major and minor gridlines, tick lines and labels.

To style a MajorGridline or MinorGridLine create a Style with TargetType=Line and set properties such as Stroke, StrokeThickness, StrokeDashArray etc…
To style a Major or Minor Tick, create a style with TargetType=Line and set Stroke, StrokeThickness etc... You can also set X2 to define the size of the tick.
To blanket style all labels, set the TickTextBrush and FontSize properties

Styling Axis Gridlines, Tick Lines and Labels	Copy Code
<Grid> <Grid.Resources> <Style x:Key="MajorGridLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="Red"/> </Style> <Style x:Key="MinorGridLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="#55FFFFFF"/> </Style> <Style x:Key="MajorTickLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="Red"/> <Setter Property="X2" Value="10"/> </Style> <Style x:Key="MinorTickLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="#55FFFFFF"/> <Setter Property="X2" Value="3"/> </Style> </Grid.Resources> <!-- Create the chart surface --> <!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" --> <s:SciChartSurface> <!-- Create XAxis --> <s:SciChartSurface.XAxis> <s:NumericAxis TickTextBrush="Red" AxisTitle="Styled XAxis" DrawMajorBands="True" DrawMajorGridLines="True" DrawMinorGridLines="True" DrawMajorTicks="True" DrawMinorTicks="True" AxisBandsFill="#554682B4" MajorGridLineStyle="{StaticResource MajorGridLineStyle}" MinorGridLineStyle="{StaticResource MinorGridLineStyle}" MajorTickLineStyle="{StaticResource MajorTickLineStyle}" MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/> </s:SciChartSurface.XAxis> <!-- Create YAxis --> <s:SciChartSurface.YAxes> <s:NumericAxis AxisTitle="Primary YAxis" AxisAlignment="Left" AxisBandsFill="#554682B4" TickTextBrush="Green" MajorGridLineStyle="{StaticResource MajorGridLineStyle}" MinorGridLineStyle="{StaticResource MinorGridLineStyle}" MajorTickLineStyle="{StaticResource MajorTickLineStyle}" MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/> <s:NumericAxis Id="SecondaryYAxisId" AxisTitle="Secondary YAxis" AxisAlignment="Right" TickTextBrush="Orange"/> </s:SciChartSurface.YAxes> </s:SciChartSurface> </Grid>

Styling Axis Gridlines, Tick Lines and Labels

Copy Code

<Grid>
   <Grid.Resources>
      <Style x:Key="MajorGridLineStyle" TargetType="Line">
         <Setter Property="Stroke" Value="Red"/>
      </Style>
         <Style x:Key="MinorGridLineStyle" TargetType="Line">
         <Setter Property="Stroke" Value="#55FFFFFF"/>
      </Style>
      <Style x:Key="MajorTickLineStyle" TargetType="Line">
         <Setter Property="Stroke" Value="Red"/>
         <Setter Property="X2" Value="10"/>
      </Style>
      <Style x:Key="MinorTickLineStyle" TargetType="Line">
         <Setter Property="Stroke" Value="#55FFFFFF"/>
         <Setter Property="X2" Value="3"/>
      </Style>
   </Grid.Resources>
  
   <!--  Create the chart surface  -->
   <!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
   <s:SciChartSurface>

      <!--  Create XAxis  -->
      <s:SciChartSurface.XAxis>
      <s:NumericAxis TickTextBrush="Red" AxisTitle="Styled XAxis" DrawMajorBands="True" DrawMajorGridLines="True"      
         DrawMinorGridLines="True"
         DrawMajorTicks="True" DrawMinorTicks="True"
         AxisBandsFill="#554682B4"                              
         MajorGridLineStyle="{StaticResource MajorGridLineStyle}"
         MinorGridLineStyle="{StaticResource MinorGridLineStyle}"
         MajorTickLineStyle="{StaticResource MajorTickLineStyle}"
         MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/>
      </s:SciChartSurface.XAxis>

      <!--  Create YAxis  -->
      <s:SciChartSurface.YAxes>
         <s:NumericAxis AxisTitle="Primary YAxis" AxisAlignment="Left"
            AxisBandsFill="#554682B4"
            TickTextBrush="Green"       
            MajorGridLineStyle="{StaticResource MajorGridLineStyle}"
            MinorGridLineStyle="{StaticResource MinorGridLineStyle}"
            MajorTickLineStyle="{StaticResource MajorTickLineStyle}"
            MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/>
         <s:NumericAxis Id="SecondaryYAxisId" AxisTitle="Secondary YAxis" AxisAlignment="Right" TickTextBrush="Orange"/>
      </s:SciChartSurface.YAxes>
   </s:SciChartSurface>
</Grid>