SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
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.
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
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?
<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>
// *************************************************************************************
// 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();
}
}
}
}
// *************************************************************************************
// 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();
}
}
}
<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>