WPF Charting Documentation - SciChart WPF Charts SDK v5.x
Templating and Styling Chart Parts

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.

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>

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 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>

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>

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}">

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.  

 

 


SCICHART ® is a Registered Trademark in the UK, US and EU. Copyright SciChart Ltd 2011-2018.

Email us to give feedback!