Templating and Styling Chart Parts

Most of the parts within SciChart can be template and styled independently of Themes using WPF ControlTemplates. The 2D Charts > Style a Chart > Xaml Styling example shows you how to template and style the main scichart parts.

Examples for the Styling the Chart can be found in the SciChart WPF Examples Suite which can be downloaded from the SciChart Website or our SciChart.WPF.Examples Github Repository.

Styling the Chart Viewport

The Chart Background area is set by the SciChartSurface.Background property. In the case of the Xaml Styling application, the SciChartSurface background is set by a style. This also sets the Chart Title FontSize, FontFamily and Foreground.

Styling the Chart Viewport	Copy Code
<!-- Define styles for the SciChartSurface --> <Style x:Key="SciChartSurfaceStyle" TargetType="s:SciChartSurface"> <Setter Property="Background" Value="Orange"/> <Setter Property="Padding" Value="20"/> <Setter Property="Foreground" Value="DarkOrchid"/> <Setter Property="FontSize" Value="20"/> <Setter Property="FontFamily" Value="Arial Black"/> <Setter Property="FontWeight" Value="Bold"/> </Style>

Styling the Chart Viewport

Copy Code

<!--  Define styles for the SciChartSurface  -->
<Style x:Key="SciChartSurfaceStyle" TargetType="s:SciChartSurface">
       <Setter Property="Background" Value="Orange"/>
       <Setter Property="Padding" Value="20"/>
       <Setter Property="Foreground" Value="DarkOrchid"/>
       <Setter Property="FontSize" Value="20"/>
       <Setter Property="FontFamily" Value="Arial Black"/>
       <Setter Property="FontWeight" Value="Bold"/>
</Style>

Next, the Viewport background is styled by the GridLinesPanelStyle. The following style changes the viewport background color to Pink. It also sets a border around the inner chart viewport.

Styling the Chart Viewport	Copy Code
<!-- Define styles for the GridLinesPanel --> <Style x:Key="GridLinesPanelStyle" TargetType="s:GridLinesPanel"> <Setter Property="Background" Value="Pink"/> <Setter Property="BorderThickness" Value="2"/> <Setter Property="BorderBrush" Value="SteelBlue"/> </Style> <!-- Where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" --> <s:SciChartSurface GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}"> </s:SciChartSurface>

Styling the Chart Viewport

Copy Code

<!--  Define styles for the GridLinesPanel  -->
<Style x:Key="GridLinesPanelStyle" TargetType="s:GridLinesPanel">
       <Setter Property="Background" Value="Pink"/>
       <Setter Property="BorderThickness" Value="2"/>
       <Setter Property="BorderBrush" Value="SteelBlue"/>
</Style>

<!-- Where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartSurface GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}">
</s:SciChartSurface>

Styling Axis

The Axis itself can be styled via a Style applied to AxisBase derived types. E.g the following style from the XamlStyling application sets axis FontSize, FontWeight, FontFamily, Title font properties, Tick Text Brush, Major and Minor Tick line style.

Styling Axis	Copy Code
<!-- Define styles for the X and Y Axes --> <Style x:Key="AxisStyle" TargetType="s:AxisBase"> <Setter Property="FontSize" Value="12"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="FontFamily" Value="Segoe UI"/> <Setter Property="TitleFontSize" Value="12"/> <Setter Property="TitleFontWeight" Value="Bold"/> <Setter Property="TickTextBrush" Value="Crimson"/> <Setter Property="DrawMajorBands" Value="True"/> <Setter Property="AxisBandsFill" Value="#55ff6655"/> <Setter Property="TickLabelStyle" Value="{StaticResource AxisLabelStyle}"/> <Setter Property="MajorTickLineStyle"> <Setter.Value> <Style TargetType="Line"> <Setter Property="Stroke" Value="GreenYellow"/> <Setter Property="StrokeThickness" Value="1"/> <Setter Property="X2" Value="8"/> <Setter Property="Y2" Value="8"/> </Style> </Setter.Value> </Setter> <Setter Property="MinorTickLineStyle"> <Setter.Value> <Style TargetType="Line"> <Setter Property="Stroke" Value="Violet"/> <Setter Property="StrokeThickness" Value="1"/> <Setter Property="X2" Value="4"/> <Setter Property="Y2" Value="4"/> </Style> </Setter.Value> </Setter> <Setter Property="MajorGridLineStyle"> <Setter.Value> <Style TargetType="Line"> <Setter Property="Stroke" Value="GreenYellow"/> <Setter Property="StrokeThickness" Value="1"/> <Setter Property="StrokeDashArray" Value="10 5"/> </Style> </Setter.Value> </Setter> <Setter Property="MinorGridLineStyle"> <Setter.Value> <Style TargetType="Line"> <Setter Property="Stroke" Value="Violet"/> <Setter Property="StrokeThickness" Value="1"/> <Setter Property="StrokeDashArray" Value="2 2"/> </Style> </Setter.Value> </Setter> </Style>

Styling Axis

Copy Code

<!--  Define styles for the X and Y Axes  -->
<Style x:Key="AxisStyle" TargetType="s:AxisBase">
       <Setter Property="FontSize" Value="12"/>
       <Setter Property="FontWeight" Value="Normal"/>
       <Setter Property="FontFamily" Value="Segoe UI"/>
       <Setter Property="TitleFontSize" Value="12"/>
       <Setter Property="TitleFontWeight" Value="Bold"/>
       <Setter Property="TickTextBrush" Value="Crimson"/>
       <Setter Property="DrawMajorBands" Value="True"/>
       <Setter Property="AxisBandsFill" Value="#55ff6655"/>
       <Setter Property="TickLabelStyle" Value="{StaticResource AxisLabelStyle}"/>
       <Setter Property="MajorTickLineStyle">
             <Setter.Value>
                    <Style TargetType="Line">
                           <Setter Property="Stroke" Value="GreenYellow"/>
                           <Setter Property="StrokeThickness" Value="1"/>
                           <Setter Property="X2" Value="8"/>
                           <Setter Property="Y2" Value="8"/>
                    </Style>
             </Setter.Value>
       </Setter>
       <Setter Property="MinorTickLineStyle">
             <Setter.Value>
                    <Style TargetType="Line">
                           <Setter Property="Stroke" Value="Violet"/>
                           <Setter Property="StrokeThickness" Value="1"/>
                           <Setter Property="X2" Value="4"/>
                           <Setter Property="Y2" Value="4"/>
                    </Style>
             </Setter.Value>
       </Setter>
       <Setter Property="MajorGridLineStyle">
             <Setter.Value>
                    <Style TargetType="Line">
                           <Setter Property="Stroke" Value="GreenYellow"/>
                           <Setter Property="StrokeThickness" Value="1"/>
                           <Setter Property="StrokeDashArray" Value="10 5"/>
                    </Style>
             </Setter.Value>
       </Setter>
       <Setter Property="MinorGridLineStyle">
             <Setter.Value>
                    <Style TargetType="Line">
                           <Setter Property="Stroke" Value="Violet"/>
                           <Setter Property="StrokeThickness" Value="1"/>
                           <Setter Property="StrokeDashArray" Value="2 2"/>
                    </Style>
             </Setter.Value>
       </Setter>
</Style>

Axis Labels

Axis Labels in the XamlStyling example are styled by setting simple properties such as Foreground, FontSize, FontWeight:

Axis Labels	Copy Code
<Style x:Key="LeftAxisLabelStyle" TargetType="s:DefaultTickLabel"> <Setter Property="Foreground" Value="Green"/> <Setter Property="FontSize" Value="15"/> <Setter Property="FontWeight" Value="Bold"/> <!-- Align labels to the left side --> <Setter Property="HorizontalAnchorPoint" Value="Right"/> </Style>

Axis Labels

Copy Code

<Style x:Key="LeftAxisLabelStyle" TargetType="s:DefaultTickLabel">
                <Setter Property="Foreground" Value="Green"/>
                <Setter Property="FontSize" Value="15"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <!--  Align labels to the left side  -->
                <Setter Property="HorizontalAnchorPoint" Value="Right"/>
</Style>

Where

Axis Labels	Copy Code
<s:NumericAxis TickLabelStyle="{StaticResource LeftAxisLabelStyle}"/>

You can also template the axis labels and provide your own ControlTemplate. For more details, please see Styling Axis Gridlines, Tick Lines and Labels

Axis Titles

Axis Titles in the XamlStyling example are styled by setting the AxisBase.TitleStyle property. For example:

Axis Titles	Copy 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 AxisTitle="Time Axis Title" TitleStyle="{StaticResource BottomAxisTitleStyle}">

Axis Titles

Copy 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 AxisTitle="Time Axis Title" TitleStyle="{StaticResource BottomAxisTitleStyle}">

This technique allows you to set any UI as the axis title, for instance, you could insert an image or RichTextBox to show an equation as Axis Title.

Styling Tooltips

Tooltip styling is covered in Sections Rollover Modifier to VerticalSlive Modifier depending on the type of ChartModifier used to declare tooltips.

Styling Legends

Legend styling is covered in Section Legend Modifier

Styling Scrollbars and SciChartOverview

Scrollbars are also styled in the XamlStyling Example. You can find a detailed walkthrough of how to style the individual parts of the SciChartScrollbar and SciChartOverview in Styling the SciChartScrollbar , Styling the SciChartScrollbar and Styling the SciChartOverview.