// WPF Chart Examples

SciChart WPF ships with hundreds of WPF Chart Examples which you can browse, play with, view the source-code and even export each WPF Chart Example to a stand-alone Visual Studio solution. All of this is possible with the new and improved SciChart WPF Examples Suite, which ships as part of the SciChart WPF SDK.

DOWNLOAD THE SDK

// WPF Chart Create a Custom Theme

SciChart Ships with 8 stunning themes, which you can apply to your charts with a single line of code.

This example shows how to style SciChart with your own custom theme, and how it affects default cursor, zoom, axis, grid and series colors.

Tips!

To define your custom theme you need to create a ResourceDictionary with the brushes and colors which are all keyed off the properties in the IThemeProvider interface.

You can also take one of our themes and just override certain brushes or colors.

Documentation Links

– How to Create a Custom Theme for SciChart
– FAQ: Example for implementing IThemeProvider
– IThemeProvider Members

// Source Code

The C#/WPF source code for the WPF Chart Create a Custom Theme example is included below (Scroll down!).

Did you know you can also view the source code from one of the following sources as well?

Clone the SciChart.WPF.Examples from Github.
Or, view source in the SciChart WPF Examples suite.
Also the SciChart WPF Trial contains the full source for the examples (link below).

DOWNLOAD THE WPF CHART EXAMPLES

WPF Chart Create a Custom Theme - View Source Code for this example

The SciChart Examples source code is available on Github and viewable in-app for some platforms

// CustomThemeView.xaml

<UserControl x:Class="SciChart.Examples.Examples.StyleAChart.CustomTheme.ChangeThemeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             Loaded="ChangeTheme_Loaded"
             d:DesignHeight="400"
             d:DesignWidth="600"
             mc:Ignorable="d">
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="32" />
        </Grid.RowDefinitions>

        <s:SciChartSurface x:Name="sciChart"
                           Grid.Row="0"
                           ChartTitle="Custom Theme - Berry Blue">

            <!--  Add some sample RenderableSeries. Each theme has a default style for these  -->
            <s:SciChartSurface.RenderableSeries>
                <s:FastMountainRenderableSeries x:Name="mountainSeries" YAxisId="PrimaryAxisId" />
                <s:FastCandlestickRenderableSeries x:Name="candlestickSeries"
                                                   AntiAliasing="False"
                                                   YAxisId="PrimaryAxisId" />
                <s:FastLineRenderableSeries x:Name="lineSeries" YAxisId="PrimaryAxisId" />
                <s:FastColumnRenderableSeries x:Name="columnSeries" YAxisId="SecondaryAxisId" />
            </s:SciChartSurface.RenderableSeries>

            <!--  Add a DateTime XAxis  -->
            <s:SciChartSurface.XAxis>
                <s:DateTimeAxis x:Name="xAxis" AxisTitle="Time Axis Title" />
            </s:SciChartSurface.XAxis>

            <!--  Add two YAxes, to display price and volume data  -->
            <s:SciChartSurface.YAxes>

                <s:NumericAxis AxisAlignment="Right"
                               AxisTitle="Axis Right Title"
                               DrawMajorBands="True"
                               Id="PrimaryAxisId"
                               TextFormatting="#.0">
                    <s:NumericAxis.GrowBy>
                        <!--
                            Using GrowBy of 10% below and 20% above, has the effect of
                            aligning all series on this axis just below centre
                        -->
                        <s:DoubleRange Max="0.1" Min="0.20" />
                    </s:NumericAxis.GrowBy>

                    <s:NumericAxis.Scrollbar>
                        <s:SciChartScrollbar Width="25" />
                    </s:NumericAxis.Scrollbar>
                </s:NumericAxis>

                <s:NumericAxis AxisAlignment="Left"
                               AxisTitle="Axis Left Title"
                               Id="SecondaryAxisId"
                               TextFormatting="###E+0">
                    <s:NumericAxis.GrowBy>
                        <!--
                            Using GrowBy of 0% below and 300% above, has the effect of
                            aligning all series on this axis to the bottom quarter of the axis
                        -->
                        <s:DoubleRange Max="3.0" Min="0" />
                    </s:NumericAxis.GrowBy>

                    <s:NumericAxis.Scrollbar>
                        <s:SciChartScrollbar Width="25" />
                    </s:NumericAxis.Scrollbar>
                </s:NumericAxis>


            </s:SciChartSurface.YAxes>

            <!--  Add some modifiers to zoom, zoom extents  -->
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:XAxisDragModifier />
                    <s:YAxisDragModifier AxisId="SecondaryAxisId" />
                    <s:YAxisDragModifier AxisId="PrimaryAxisId" />
                    <s:LegendModifier Margin="10"
                                      ShowLegend="True"
                                      ShowVisibilityCheckboxes="False" />
                    <s:RubberBandXyZoomModifier />
                    <s:ZoomPanModifier ExecuteOn="MouseRightButton" />
                    <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
                    <s:CursorModifier ReceiveHandledEvents="True"
                                      ShowAxisLabels="True"
                                      ShowTooltip="True"
                                      ShowTooltipOn="MouseRightButtonDown" />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>

        </s:SciChartSurface>

        <s:SciChartOverview x:Name="overview"
                            Grid.Row="1"
                            SelectedRange="{Binding Source={x:Reference Name=sciChart},
                                                    Path=XAxis.VisibleRange,
                                                    Mode=TwoWay}" />
    </Grid>
</UserControl>

// CustomThemeView.xaml.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// CustomThemeView.xaml.cs is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use. 
// 
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied. 
// *************************************************************************************
using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using SciChart.Charting;
using SciChart.Charting.Model.DataSeries;
using SciChart.Examples.ExternalDependencies.Common;
using SciChart.Examples.ExternalDependencies.Data;

namespace SciChart.Examples.Examples.StyleAChart.CustomTheme
{
    public partial class ChangeThemeView : UserControl
    {
        public ChangeThemeView()
        {
            InitializeComponent();

            var customTheme = new CustomTheme();
            ThemeManager.AddTheme("BerryBlue", customTheme);
            ThemeManager.SetTheme(sciChart, "BerryBlue");
            ThemeManager.SetTheme(overview, "BerryBlue");
        }

        private void ChangeTheme_Loaded(object sender, RoutedEventArgs e)
        {
            using (sciChart.SuspendUpdates())
            {
                // Create some dataseries of type x=DateTime, y=Double
                var dataSeries0 = new XyDataSeries<DateTime, double> {SeriesName = "Mountain Series"};
                var dataSeries1 = new OhlcDataSeries<DateTime, double> {SeriesName = "Candlestick Series"};
                var dataSeries2 = new XyDataSeries<DateTime, double> {SeriesName = "Line Series"};
                var dataSeries3 = new XyDataSeries<DateTime, double> {SeriesName = "Column Series"};

                var dataSource = DataManager.Instance;

                // Prices are in the format Time, Open, High, Low, Close (all IList)            
                var prices = dataSource.GetPriceData(Instrument.Indu.Value, TimeFrame.Daily);

                // Append data to series.                 
                dataSeries0.Append(prices.TimeData, dataSource.Offset(prices.LowData, -1000));
                dataSeries1.Append(prices.TimeData, prices.OpenData, prices.HighData, prices.LowData, prices.CloseData);                
                dataSeries2.Append(prices.TimeData, dataSource.ComputeMovingAverage(prices.CloseData, 50));                
                dataSeries3.Append(prices.TimeData, prices.VolumeData.Select(x => (double) x));

                // Assign data to RenderableSeries
                mountainSeries.DataSeries = dataSeries0;
                candlestickSeries.DataSeries = dataSeries1;
                lineSeries.DataSeries = dataSeries2;
                columnSeries.DataSeries = dataSeries3;

                overview.ParentSurface = sciChart;

                sciChart.ZoomExtents();
            }
        }
    }
}

// CustomTheme.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// CustomTheme.cs is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use. 
// 
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied. 
// *************************************************************************************
using System.Windows;

namespace SciChart.Examples.Examples.StyleAChart.CustomTheme
{
    public partial class CustomTheme : ResourceDictionary
    {
        public CustomTheme()
        {
            InitializeComponent();
        }
    }
}

// CustomTheme.xaml

<ResourceDictionary x:Class="SciChart.Examples.Examples.StyleAChart.CustomTheme.CustomTheme"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--  *************************  -->
    <!--  Colors and Brushes  -->
    <!--  *************************  -->

    <!--  Chart Brushes  -->
    <SolidColorBrush x:Key="TickTextBrush" Color="#FF6495ED" />
    <SolidColorBrush x:Key="MajorGridLineBrush" Color="#102A47" />
    <SolidColorBrush x:Key="MinorGridLineBrush" Color="#0D223D" />
    <SolidColorBrush x:Key="SciChartBackground" Color="#0D213A"/>
    <SolidColorBrush x:Key="GridBorderBrush" Color="#102A47" />
    <SolidColorBrush x:Key="GridBackgroundBrush" Color="Transparent" />
    <SolidColorBrush x:Key="RolloverLineBrush" Color="#33FD9F25" />
    <SolidColorBrush x:Key="CursorLineBrush" Color="#996495ED" />
    <SolidColorBrush x:Key="RubberBandFillBrush" Color="#33999999" />
    <SolidColorBrush x:Key="RubberBandStrokeBrush" Color="#77999999" />
    <SolidColorBrush x:Key="LegendBackgroundBrush" Color="#1D2C35" />

    <SolidColorBrush x:Key="LabelBackgroundBrush" Color="#AA6495ED" />
    <SolidColorBrush x:Key="LabelBorderBrush" Color="#FF6495ED" />
    <SolidColorBrush x:Key="LabelForegroundBrush" Color="#EEEEEE" />

    <SolidColorBrush x:Key="TextAnnotationForeground" Color="#EEEEEE" />
    <SolidColorBrush x:Key="TextAnnotationBackground" Color="#AA6495ED" />

    <Color x:Key="AxisBandsFill">#0E233A</Color>

    <!--  Default Series Colors  -->
    <Color x:Key="UpWickColor">#FF6495ED</Color>
    <Color x:Key="DownWickColor">#FF00008B</Color>
    <SolidColorBrush x:Key="UpBodyBrush" Color="#A06495ED" />
    <SolidColorBrush x:Key="DownBodyBrush" Color="#A000008B" />

    <Color x:Key="UpBandSeriesLineColor">#FF6495ED</Color>
    <Color x:Key="DownBandSeriesLineColor">#FF00008B</Color>
    <Color x:Key="UpBandSeriesFillColor">#A06495ED</Color>
    <Color x:Key="DownBandSeriesFillColor">#A000008B</Color>

    <LinearGradientBrush x:Key="MountainAreaBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="#094C9F" Offset="0"/>
        <GradientStop Color="#000710" Offset="1"/>
    </LinearGradientBrush>

    <Color x:Key="MountainLineColor">#76BBD2</Color>
    <Color x:Key="LineSeriesColor">#FFC6E6FF</Color>
    <Color x:Key="ColumnLineColor">#FFFFFFFF</Color>
    <SolidColorBrush x:Key="ColumnFillBrush" Color="#FFFFFFFF"></SolidColorBrush>

    <Brush x:Key="OverviewFillBrush">#A06495ED</Brush>

    <Brush x:Key="ScrollbarViewportBackgroundBrush">#A06495ED</Brush>

    <LinearGradientBrush x:Key="DefaultColorMapBrush">
        <GradientStop Offset="0" Color="DarkBlue" />
        <GradientStop Offset="0.5" Color="CornflowerBlue" />
        <GradientStop Offset="1" Color="#FF22AA" />
    </LinearGradientBrush>

    <Color x:Key="ShadowEffectColor">MediumPurple</Color>

    <!-- 3D Chart specific themes -->
    <Color x:Key="PlaneBorderColor">Black</Color>
    <Color x:Key="AxisPlaneBackgroundFill">#00000000</Color>
    <Color x:Key="Axis3DBandsFill">#0E233A</Color>
    
</ResourceDictionary>

< BACK TO ALL WPF CHART CHART EXAMPLES

// WPF Chart Examples

// WPF Chart Create a Custom Theme

// Source Code

// CustomThemeView.xaml

// CustomThemeView.xaml.cs

// CustomTheme.cs

// CustomTheme.xaml

WPF CHART EXAMPLES

2D Charts

Basic Chart Types

Chart Annotations

Create a Multiseries Chart

Create Custom Charts

Create Realtime Charts

Create Stock Charts

Export a Chart

Filters API

Heatmap Chart Types

Legends

Link Multiple Charts

Manipulate Series

Modify Axis Behavior

MVVM Examples

Styling and Theming

Ternary Chart Types

Tooltips and Hit Test

Zoom and Pan a Chart

Zoom History Manager

3D Charts

Basic Chart Types

Customize 3D Charts

Manipulate Series

Modify Axis3D Behavior

Realtime 3D Charts

Style a 3D Chart

Surface Mesh Charts

Tooltips and Hit Test 3D Charts

Zoom and Pan a 3D Chart

Featured Apps

Financial Charts

Medical Charts

Parallel Coordinate Plots

Performance Demos

Scientific Charts